У меня два DIV, и тот, который приходит последним в исходном коде, появляется сверху на веб-странице. Я хочу, чтобы они отображались в их естественном порядке. Первый DIV сверху, второй DIV ниже.
HTML
<div id="intro">
<h2>Gteaay Presents</h2>
<h1 id="header-bigger">Producer World</h1>
<p class="header-smaller">For Producers by producers. A guide for choosing the right music composing software for you!</p>
</div>
<div id="nav">
<ul>
<li><a href="index.html">New Products</a></li>
<li><a href="inspiration/">Inspiration</a></li>
<li><a href="coupons.html">Coupons</a></li>
</ul>
</div>
CSS
#intro {
text-align: center;
margin: 2em 0em 1em;
background-image: url('images/gloomy-stripes-blue-lively.jpg');
padding: 0;
border-top: medium #0B9696 solid;
border-bottom: medium #0B9696 solid;
position: fixed;
width: 100%;
}
#nav {
background-color: black;
height: 3em;
position: fixed;
width: 100%;
}
PS Это произошло после того, я сделал их position: fixed;
До этого они были в порядке. EDIT На самом деле теперь DIV # 2 появляется поверх DIV # 1.
Когда вы используете position: absolute
или position: fixed
, вы удаляете элемент из потока документа. Таким образом, в этом случае #intro
удаляется из потока, а #nav
перемещается на свое место (попробуйте удалить position: fixed
только с #nav
и увидеть разницу).
Теперь #nav
получает свое собственное position: fixed
, которое удаляет это из потока, блокируя его в #nav
положении. Единственное, что это место, - это новый, выровненный по #intro
который был выведен из #intro
, выведенный из потока.
Чтобы решить проблему, у вас должен быть один контейнер, содержащий как #intro
и #nav
, и применять position: fixed
для контейнера.
Примечание: вы неправильно используете теги <h*>
. "Gteaay Presents" должен, в лучшем случае, быть в <div>
с большим font-size
.
Ваш DIV # 2 теперь появляется поверх DIV # 1, потому что DIV # 2 является последним, объявленным в вашем HTML. для решения этой проблемы просто добавьте в свой CSS (DIV # 2): z-index: -1; или DIV # 1: z-index: 1;
Надеюсь, поможет.
z-index
работает для перекрывающихся элементов, и это дает нам возможность решать, какие элементы выглядят как сверху, а какие - под ними. Например, представьте, что у вас есть куча журналов, а некоторые журналы находятся под другими журналами, и вы можете просто увидеть части каждого журнала. Однако я не хочу, чтобы эти элементы перекрывались, поэтому z-index
здесь не будет работать. Я ответил на свой вопрос, так что взгляните на это.
Это прямое решение проблемы, и она берет существенную часть ответа Ниета и включает его в мое решение здесь.
Причина, по которой это "не работает", заключалась в том, что, когда вы используете position: absolute or position: fixed
, вы удаляете элемент из потока документа. Таким образом, в этом случае #intro
удаляется из потока, а #nav
перемещается на свое место.
Также, когда вы используете position: fixed
мы также можем добавить specific
позицию, используя такие атрибуты, как top
, left
и т.д.
Таким образом, решение состоит в том, чтобы дать им определенную фиксированную позицию в соответствии с новой позицией в потоке документа.
например, для #intro top: 10%
или top: 10em;
или top: 10px;
а затем, конечно, дать #nav другую позицию, которая не перекрывается. например, top: 20%
или top: 20em
или top: 20px
PS Я не знаю, действительно ли эти ценности выглядят правильно или работают, но я просто демонстрацию решения.
position: fixed
(без top
, left
и т. Д.) Для элемента, расположенного ниже по странице.