it-swarm.com.de

Absolute Positionierung ohne Auffüllung des übergeordneten Elements

Wie macht man ein absolut positioniertes Element für die Polsterung seiner Eltern? Ich möchte, dass sich ein inneres div über die Breite des übergeordneten Elements erstreckt und am unteren Rand des übergeordneten Elements positioniert wird, im Wesentlichen eine Fußzeile. Aber das Kind muss die Polsterung der Eltern respektieren und tut dies nicht. Das Kind wird direkt gegen den Rand des Elternteils gedrückt.

Also ich will das:

enter image description here

aber ich bekomme das:

enter image description here

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

Ich kann es mit einem Rand um das innere Div herum machen, aber ich würde es vorziehen, das nicht hinzufügen zu müssen.

138
d512

Zuerst sehen wir warum das passiert.

Der Grund ist, dass überraschenderweise, wenn eine Box position: absolute enthält, die überfüllte Box der übergeordneten Box (dh die Box um ihre Auffüllung) ist. Dies ist überraschend, da in der Regel (dh bei statischer oder relativer Positionierung) das übergeordnete Feld content des übergeordneten Objekts ist.

Hier ist der relevante Teil der CSS-Spezifikation :

Wenn der Vorgänger ein Inline-Element ist, ist der übergeordnete Block der Begrenzungsrahmen um die Auffüllboxen der ersten und der letzten Inline-Box, die für dieses Element generiert wurden der Vorfahr.

Der einfachste Ansatz - wie in Winters Antwort vorgeschlagen - besteht darin, padding: inherit für das absolut positionierte div zu verwenden. Es funktioniert jedoch nur, wenn Sie möchten, dass das absolut positionierte div keine zusätzliche Auffüllung hat. Ich denke, die Allzwecklösungen (insofern beide Elemente ihre eigene unabhängige Polsterung haben können) sind:

  1. Fügen Sie ein relativ relativ positioniertes div (ohne Auffüllung) um das absolut positionierte div hinzu. Dieses neue div berücksichtigt die Auffüllung des übergeordneten Elements, und das absolut positionierte div füllt es dann.

    Der Nachteil ist natürlich, dass Sie den HTML-Code einfach zu Präsentationszwecken verwenden.

  2. Wiederholen Sie den Abstand (oder fügen Sie ihn hinzu) für das absolut positionierte Element.

    Der Nachteil hier ist, dass Sie die Werte in Ihrem CSS wiederholen müssen, was spröde ist, wenn Sie das CSS direkt schreiben. Wenn Sie jedoch ein Vorverarbeitungstool wie SASS oder LESS verwenden, können Sie dieses Problem vermeiden, indem Sie eine Variable verwenden. Dies ist die Methode, die ich persönlich benutze.

Eine Sache, die Sie versuchen könnten, ist die Verwendung der folgenden CSS:

.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}

Dadurch kann das untergeordnete Element die Auffüllung vom übergeordneten Element erben. Anschließend kann das untergeordnete Element so positioniert werden, dass es mit der übergeordneten Breite und Auffüllung des übergeordneten Elements übereinstimmt.

Außerdem verwende ich box-sizing: border-box; für die beteiligten Elemente.

Ich habe dies nicht in allen Browsern getestet, aber es scheint in Chrome, Firefox und IE10 zu funktionieren. 

42
Winter

Nun, dies ist möglicherweise nicht die eleganteste Lösung (semantisch), aber in manchen Fällen funktioniert das auch ohne Nachteile: Anstelle des Auffüllens verwenden Sie einen transparenten Rahmen am übergeordneten Element. Die absolut positionierten untergeordneten Elemente berücksichtigen den Rahmen und er wird genau gleich gerendert (außer Sie verwenden den Rahmen des übergeordneten Elements zum Gestalten).

28
NewSpender

Verwenden Sie in der übergeordneten Tabelle div anstelle von padding: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html

6
Niloct

Hier ist mein bester Schuss. Ich habe ein weiteres Div hinzugefügt und rot gemacht und die Höhe Ihrer Eltern in 200px geändert, nur um es zu testen. Die Idee ist, dass das Kind jetzt zum Enkelkind wird und der Elternteil zum Großelternteil. Der Elternteil respektiert also seinen Elternteil. Ich hoffe, du bekommst meine Idee.

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
     <div style="background-color: red;  position: relative; height: 100%;">    
        <div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
     </div>
    </div>
  </body>
</html>

Bearbeiten:

Ich denke, was Sie versuchen, kann nicht getan werden. Absolute Position bedeutet, dass Sie ihm Koordinaten geben werden, die er einhalten muss. Was ist, wenn das übergeordnete Element einen Abstand von 5 Pixeln hat? Und Sie positionieren das Kind absolut auf top: -5px; links: -5px . Wie soll es sein, die Eltern und dich gleichzeitig zu ehren?

Meine Lösung

Wenn Sie möchten, dass die Eltern geehrt werden, positionieren Sie sie nicht absolut.

5
Touch

1.) Sie können keinen großen Rand für das übergeordnete Element verwenden - falls Sie einen bestimmten Rand haben möchten 

2.) Sie können keinen Rand hinzufügen - falls Ihr Elternteil Teil eines anderen Containers ist und Sie möchten, dass Ihr Elternteil die volle Breite des übergeordneten Elternteils einnimmt.

Die einzige Lösung, die anwendbar sein sollte, ist, Ihre Kinder in einen anderen Behälter zu verpacken, so dass Ihre Eltern Großeltern werden, und dann den neuen Kinder-Wrapper/Elternteil mit Polstern zu füllen. Oder Sie können die Kinder direkt mit Padding versehen.

In Ihrem Fall:

.css-sux{
  padding: 0px 10px 10px 10px;
}
2
bhavya_w

Könnte leicht mit einer zusätzlichen Stufe von Div durchgeführt werden.

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

Demo: https://jsfiddle.net/soxv3vr0/

0
asankasri