Dlaczego tworzenie stylu znacznika body "position: relative" powoduje, że div zaczyna się od najniższej pozycji?

Jeśli utworzyłem div (u góry strony) ma wartość margin-top: 10px, to bezwzględnie umieszczony element div (który znajduje się na wyższym indeksie Z i poza tym działkiem i poza tym rodzicem div) nie zaczyna się od top: 0px, ale pod numerem 10px!Dlaczego tworzenie stylu znacznika body "position: relative" powoduje, że div zaczyna się od najniższej pozycji?

http://jsfiddle.net/afv3gze7/

Dlaczego tak jest? Po prostu usunięcie position: relative na ciele naprawia wszystko (ale powoduje problemy z innymi rzeczami w moim kodzie - potrzebuję ciała umieszczonego relatywnie).

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

Kod Problem:

<!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>

Źródło

2014-09-05 Don Rhummy

Ponieważ elementy pozycjonowane bezwzględnie są pozycjonowane względem ich najbliższego umiejscowionego przodka. – j08691

Ale @ j08691 najbliższym pozycjonowanym przodkiem jest ciało. –

Możliwy duplikat [Dlaczego nie \ 'top: 0 \ 'działa na pozycjonowany absolutnie element względem ciała?] (Http://stackoverflow.com/questions/33594788/why-doesnt-top-0-work-on -absolutnie pozycjonowany-element-względem-ciała) –

To co position: relative w CSS robi. Przesuwa element z miejsca, w którym normalnie by się pojawił i opuszcza przestrzeń, w której normalnie by się znajdował. Oto more about relative positioning.

Jeśli trzeba zachować position: relative na elemencie ciała, zmienić właściwość margin-top na klasie .inner do 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; 
}

Źródło

2014-09-05 19:30:31

Wartości podane dla 'top' i' left' to '0em', natomiast' bottom' i 'right' wcale nie są ustawione. Względnie umieszczony element nie zostanie w ogóle przesunięty. – Quentin

Zmiana na "dopełnienie" naprawiła problem! Dzięki. –

Ale element problemu - nakładka - NIE jest względnie pozycjonowany. Wydaje się, że margines ciała "odwrotnie dziedziczy" górny margines wewnętrzny. To wydaje się złe. Innym sposobem rozwiązania problemu jest dodanie niewidocznej treści na zewnątrz. To wstrząsa silnikiem CSS z powodu zamieszania i zmusza go do prawidłowego działania. –

Ustawianie position: relative (lub jakakolwiek inna wartość pozycjonowanie nie jest static) ustanawia nowy kontekst pozycjonowania.

Absolutnie pozycjonowane potomstwo zostanie ustawione względem względnie umieszczonych krawędzi elementu zamiast tych w oknie.

Ponieważ element bryłowy ma domyślnie niezerowy margines i/lub dopełnienie, górna część .outer jest niższa, więc każdy umieszczony w nim element absolutnie będzie również.

Źródło

2014-09-05 19:32:50 Quentin

Tak, ale problem nadal występuje, gdy margines i dopełnienie są zerowe. Jakieś pomysły? http://stackoverflow.com/q/33594788/3597276 –

Ale element problemu (nakładka) jest ustawiony absolutnie, a nie względnie. A kontekstem pozycjonowania jest ciało. Jeśli ustawisz margines i dopełnienie w ciele na zero, problem będzie nadal występował. Element nakładki powinien znajdować się u góry: 0 i lewy: 0 względem pola zawartości ciała ... a tak nie jest.

Jeśli dodać dowolną zawartość do zewnętrznej, na przykład ...

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

Wtedy to rozwiązuje problem. Jest również stałym jeśli dodać obramowanie do zewnętrznej, na przykład ...

border: 1px solid transparent;

Fiddle

żadna z odpowiedzi wydają się wyjaśnić to zachowanie za Asolutely elementu pozycjonowanego w stosunku do ciała.

EDIT: problem jest również upadł ustawiając wyściółkę ciała do 1px ...

body{ 
    padding-top: 1px; 
}

Albo, ustalając granicę dla ciała ...

body{ 
    border: 1px solid transparent; 
}

Źródło

2014-09-06 05:50:48

Dlaczego tworzenie stylu znacznika body "position: relative" powoduje, że div zaczyna się od najniższej pozycji?

Odpowiedz

Powiązane problemy