Почему создание стиля тега тега «позиция: относительное» приводит к тому, что абсолютный позиционный div начинается ниже?

Если у меня есть div (вверху страницы), то есть margin-top: 10px, а затем абсолютно позиционированный div (то есть на более высоком z-index и вне этого div и вне этого родителя div) начинается не с top: 0px, но на 10px!Почему создание стиля тега тега «позиция: относительное» приводит к тому, что абсолютный позиционный div начинается ниже?

http://jsfiddle.net/afv3gze7/

Почему это? Просто удаление position: relative на теле исправляет все (но вызывает проблемы с другими вещами в моем коде - мне нужно, чтобы тело располагалось относительно).

http://jsfiddle.net/afv3gze7/1/

Проблема Код:

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      html 
      { 
       position: relative; 
       min-width: 100%; 
       height: 100%; 
       min-height:100%; 
      } 

      body 
      { 
       min-width: 100%; 
       min-height:100%; 
       font-size: 100%; 
      } 
      .outer 
      { 
       position: relative; 
       top: 0em; 
       left: 0em; 
       width: 100%; 
       height: 100%; 
       background-color: #ffffff; 
      } 

      .overlay 
      { 
       position: absolute; 
       top: 0px; 
       left: 0em; 
       width: 100%; 
       height: 100%; 
       background-color: #000000; 
       -moz-opacity: 0.50; 
       -khtml-opacity: 0.50; 
       -webkit-opacity: 0.50; 
       opacity: 0.50; 
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50); 
       filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
       filter:alpha(opacity=50); 
       z-index: 6; 
       display: none; 
      } 

      .inner 
      { 
       position: relative; 
       width: 100%; 
       border: none; 
       margin: 0em; 
       padding: 0em; 
       margin-top: 3.875em; 
       overflow: hidden; 
       z-index: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="outer"> 
      <div class="inner">s</div> 
     </div> 
     <div class="overlay" style="display: block;"></div> 
    </body> 
</html>

источник

2014-09-05 Don Rhummy

Поскольку абсолютно позиционированные элементы расположены относительно их ближайшего расположенного предка. – j08691

Но @ j08691 ближайший позиционированный предок - тело. –

Возможный дубликат [Почему не \ 'top: 0 \' работает над абсолютно позиционированным элементом относительно тела?] (Http://stackoverflow.com/questions/33594788/why-doesnt-top-0-work-on -absolutely-position-element-relative-to-body) –

Это то, что position: relative в CSS делает. Он перемещает элемент от того места, где он обычно отображается, и оставляет пространство, которое оно обычно занимает там. Вот more about relative positioning.

Если вы должны держать position: relative на элемент тела, изменить margin-top свойства для класса .inner в padding-top:

.inner 
{ 
    position: relative; 
    width: 100%; 
    border: none; 
    margin: 0em; 
    padding: 0em; 
    /*margin-top: 3.875em;*/ 
    padding-top: 3.875em; 
    overflow: hidden; 
    z-index: 0; 
}

источник

2014-09-05 19:30:31

Значения, заданные 'top' и' left', равны '0em', а' bottom' и 'right' не установлены вообще. Относительно позиционированный элемент вообще не перемещается. – Quentin

Изменение на 'padding-top' исправило проблему! Благодарю. –

Но элемент проблемы - наложение - НЕ относительный. Похоже, что край тела «обратный наследует» верхний край внутреннего. Это кажется неправильным. Другой способ устранить проблему - добавить невидимый контент в внешний. Это избавляет двигатель CSS от его замешательства и заставляет его вести себя правильно. –

Установка position: relative (или любое другое значение позиционирования, что не static) устанавливает новый контекст позиционирования.

Абсолютно позиционированные потомки будут располагаться относительно ребер относительно расположенных элементов, а не для окон.

Поскольку элемент кузова по умолчанию имеет ненулевой запас и/или прокладку, верхняя часть .outer ниже, поэтому любой абсолютно позиционированный элемент внутри него тоже будет.

источник

2014-09-05 19:32:50 Quentin

Да, но проблема все еще существует, когда маржа и заполнение равны нулю. Есть идеи? http://stackoverflow.com/q/33594788/3597276 –

Но элемент проблемы (наложение) абсолютно позиционируется, а не относительно. И контекст позиционирования - это тело. Если вы устанавливаете маржу и заполнение тела в ноль, проблема сохраняется. Элемент оверлея должен располагаться сверху: 0 и слева: 0 относительно поля содержимого тела ... и это не так.

Если добавить любое содержимое в наружный, например ...

.outer:before{ 
    content: 'outer'; 
    visibility: hidden; 
}

Затем он исправляет эту проблему. Он также фиксируется, если добавить рамку к внешним, например ...

border: 1px solid transparent;

Fiddle

Ни один из ответов не кажется, объяснить это поведение в течение asolutely расположенного элемента по отношению к телу.

EDIT: проблема также разрушилась, установив отступы тела 1px ...

body{ 
    padding-top: 1px; 
}

Или, установив границы для тела ...

body{ 
    border: 1px solid transparent; 
}

источник

2014-09-06 05:50:48

Почему создание стиля тега тега «позиция: относительное» приводит к тому, что абсолютный позиционный div начинается ниже?

ответ

Смежные вопросы