Почему эти фиксированные позиции DIV не отображаются в порядке потока документов?

0

У меня два 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.

  • 0
    И что ты хочешь?
  • 0
    Не могли бы вы предоставить скрипку?
Показать ещё 4 комментария
Теги:

3 ответа

3
Лучший ответ

Когда вы используете 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.

  • 0
    ХОРОШО. Это верно, и спасибо за советы по <h *> Но я только что решил свою проблему. Я выложу это здесь.
1

Ваш DIV # 2 теперь появляется поверх DIV # 1, потому что DIV # 2 является последним, объявленным в вашем HTML. для решения этой проблемы просто добавьте в свой CSS (DIV # 2): z-index: -1; или DIV # 1: z-index: 1;

Надеюсь, поможет.

  • 0
    Да, z-index работает для перекрывающихся элементов, и это дает нам возможность решать, какие элементы выглядят как сверху, а какие - под ними. Например, представьте, что у вас есть куча журналов, а некоторые журналы находятся под другими журналами, и вы можете просто увидеть части каждого журнала. Однако я не хочу, чтобы эти элементы перекрывались, поэтому z-index здесь не будет работать. Я ответил на свой вопрос, так что взгляните на это.
0

Это прямое решение проблемы, и она берет существенную часть ответа Ниета и включает его в мое решение здесь.

Причина, по которой это "не работает", заключалась в том, что, когда вы используете 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 Я не знаю, действительно ли эти ценности выглядят правильно или работают, но я просто демонстрацию решения.

  • 0
    Неправильно. По умолчанию он занимает любую позицию, в которой он был установлен, и причина их установки в верхней части описана в ответе, который я дал вам. Для демонстрации попробуйте задать position: fixed (без top , left и т. Д.) Для элемента, расположенного ниже по странице.
  • 0
    @NiettheDarkAbsol Я попробовал это. Я не понимаю, но ты прав. Я перечитал то, что ты сказал, и добавлю это к своему ответу.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню