Почему это дурацкое позиционирование вызывает изменения на этом сайте?

#css

Вопрос:

Если вы перейдете на этот сайт: http://www.marketwatch.com/story/social-networking-for-social-smokers-2011-05-11 и перейдите в стили и измените <div id="blanket"></div> на статическое положение, а затем добавьте оболочку вне него (или в теле), помещенную position:relative на него, страница кардинально изменится (заголовок в основном перекрывает область содержимого в этот момент.

Все, что я знаю о позиционировании, говорит мне, что этого не должно происходить, но я не могу до конца понять, почему. Я не смог найти в CSS ничего, что могло бы вызвать такое поведение. У кого-нибудь есть идеи?

Редактировать: Это не связано с моей работой или чем-то еще, но мой друг обратил на это мое внимание, и я подумал, что это щекотка для мозгов.

Я пытался сделать это:

 <body>
  <div style="position: relative;">
    <div style="position: static;">
        <div id="blanket">...</div>
    </div>
  </div>
</body>

И это не вызывает проблемы, так что на этой странице явно что-то есть, но я не могу понять, что именно. Это происходит в chrome / FF / IE.

Ответ №1:

Попробуйте проверить элементы в заголовке. Вы увидите следующие правила стиля для div#topchrome элемента:

 position: absolute;
top: 0;
width: 981px;
z-index: 10000;

position На этом элементе ( absolute , с top: 0 помощью) приводит к тому, что он перемещается в самый верх страницы (по умолчанию, неизмененное поведение). Если вы измените body на have position: relative; , вы, по сути, сказали #topchrome , что оно должно быть «абсолютным, но относительно того, где body находится». Так что теперь #topchrome фактически находится в верхней части тела, то есть в самом верху страницы. Несмотря на это, это все равно не должно ничего менять. Настоящий culript — это третий участник, div#breakingnews который обладает свойством margin-top: 177px . В новом потоке мы имеем:

 body { position: relative; }
     div#breakingnews { margin-top: 177px; }
     div#chrome
          div#topchrome { position: absolute; top: 0; }

Итак, div#breakingnews это приводит к удалению содержимого. Действительно, изменение div#blanket на have position: static не имеет к этому никакого отношения, поскольку это static (значение по умолчанию) изначально.

1. Я не уверен, правильно ли это, поскольку topchrome остается расположенным под breakingnews, чего не происходит, если body не расположен относительно. Я думаю, проблема в том, что topchrome, на самом деле, не помещается прямо под тегом body, как вы заявляете, но он попадает под это поле, чего не должно быть, и не происходит, если body не расположен относительно.

2. Возможно, я неправильно понимаю ваше объяснение, но есть ли решение, которое предотвратит это, сохраняя при этом относительное положение тела?