Warum verursacht das Setzen des Typs "position: relative" im body-Tag einen absolut positionierten div-Anfang niedriger?

Wenn ich ein div (am Anfang der Seite) habe eine margin-top: 10px, dann eine absolut positionierte div (das ist auf einem höheren z-Index und außerhalb dieser div und außerhalb dieser Elternteil div) beginnt nicht bei top: 0px aber unter 10px!Warum verursacht das Setzen des Typs "position: relative" im body-Tag einen absolut positionierten div-Anfang niedriger?

http://jsfiddle.net/afv3gze7/

Warum ist das? Einfach die position: relative auf dem Körper entfernen, behebt alles (aber verursacht Probleme mit anderen Dingen in meinem Code - ich brauche den Körper relativ positioniert).

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

Problem-Code:

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

Quelle

2014-09-05 Don Rhummy

Da absolut positionierte Elemente in Bezug auf ihren nächstliegenden Vorfahren positioniert sind. – j08691

Aber @ j08691 der am nächsten positionierte Vorfahre ist der Körper. –

Mögliches Duplikat von [Warum funktioniert 'top: 0 \' nicht am absolut positionierten Element relativ zum Body?] (Http://stackoverflow.com/questions/33594788/why-doesnt-top-0-work-on - absolut positioniertes Element - relativ zum Körper –

Dies ist, was position: relative in CSS tut. Es verschiebt das Element von dort, wo es normalerweise gerendert würde und lässt den Raum, den es normalerweise dort einnehmen würde. Hier ist more about relative positioning.

Wenn Sie position: relative auf dem Körperelement halten müssen, ändern Sie die margin-top Eigenschaft auf der .inner Klasse 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; 
}

Quelle

2014-09-05 19:30:31

Die Werte für "top" und "left" sind "0em", während "bottom" und "right" gar nicht gesetzt sind. Das relativ positionierte Element wird überhaupt nicht bewegt. – Quentin

Das Wechseln zu 'padding-top' hat das Problem behoben! Vielen Dank. –

Aber das Problemelement - Overlay - ist NICHT relativ positioniert. Es scheint, als ob der Rand des Körpers den oberen Rand des Inneren "rückwärts erbt". Das scheint falsch zu sein. Eine andere Möglichkeit, das Problem zu beheben, ist das Hinzufügen von unsichtbarem Inhalt zu outer. Dies erschüttert die CSS-Engine aus ihrer Verwirrung und zwingt sie, sich korrekt zu verhalten. –

position: relative Einstellung (oder eine andere Positionierung Wert, der nicht static ist) wird ein neuer Positionierungskontext.

Die absolut positionierten Abkömmlinge werden in Bezug auf die Kanten des relativ positionierten Elements positioniert, anstatt auf diejenigen des Fensters.

Da das body-Element standardmäßig nicht-Null-Rand und/oder Polsterung hat, ist die Spitze von .outer niedriger, so dass jedes absolut positionierte Element darin auch sein wird.

Quelle

2014-09-05 19:32:50 Quentin

Ja, aber das Problem besteht immer noch, wenn Rand und Padding gleich Null sind. Irgendwelche Ideen? http://stackoverflow.com/q/33594788/3597276 –

Aber das Problemelement (Overlay) ist absolut positioniert, nicht relativ. Und der Kontext der Positionierung ist Körper. Wenn Sie Rand und Abstand im Text auf Null setzen, bleibt das Problem bestehen. Das Overlay-Element sollte oben stehen: 0 und links: 0 relativ zur Inhaltsbox des Körpers ... und es ist nicht.

Wenn Sie Inhalte auf äußere hinzufügen, zum Beispiel ...

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

Dann legt er das Problem. Es ist festgelegt auch, wenn Sie eine Grenze zu den äußeren hinzufügen, zum Beispiel ...

border: 1px solid transparent;

Fiddle

Keine der Antworten scheint dieses Verhalten für ein asolutely positioniertes Element relativ zu dem Körper zu erklären.

EDIT: das Problem auch durch Einstellen der Polsterung des Körpers 1px ...

body{ 
    padding-top: 1px; 
}

Oder durch Setzen einer Grenze für die Körper kollabiert ist ...

body{ 
    border: 1px solid transparent; 
}

Quelle

2014-09-06 05:50:48

Warum verursacht das Setzen des Typs "position: relative" im body-Tag einen absolut positionierten div-Anfang niedriger?

Antwort

Verwandte Themen