Absolute Positionierung ohne Berücksichtigung der Polsterung des Elternteils

173

Wie lässt man ein absolut positioniertes Element die Polsterung seines Elternteils ehren? Ich möchte, dass sich ein innerer Div über die Breite seines Elternteils erstreckt und am unteren Rand dieses Elternteils positioniert wird, im Grunde genommen eine Fußzeile. Aber das Kind muss die Polsterung des Elternteils ehren und das tut es nicht. Das Kind wird direkt gegen den Rand des Elternteils gedrückt.

Also ich will das:

Geben Sie hier die Bildbeschreibung ein

aber ich verstehe das:

Geben Sie hier die Bildbeschreibung ein

<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 schaffen, aber ich würde es vorziehen, das nicht hinzufügen zu müssen.

css padding css-position d512
quelle
5
Warum nicht die linke / rechte / untere Seite des inneren Divs ändern style="background-color: gray; position: absolute; left: 10px; right: 10px; bottom: 10px;"?
j08691
12
Ja, ich habe darüber nachgedacht, aber es wird schnell zu einem Wartungsproblem, weil jedes Kind seine eigenen Offsets haben muss, um dies zu berücksichtigen. Wenn sie nur die Polsterung der Eltern ehren würden, könnten Sie sie einfach einmal in den Eltern einstellen und sich nicht um alle Kinder kümmern.
d512
Wie oben erwähnt, ist Ihr Problem gelöst , wenn Sie den Wert der Auffüllung des (relativ positionierten) Elternteils als left:und right:für das (absolut positionierte) Kind verwenden. Ich füge dieses B / C hinzu, das die Antwort ist, nach der andere mit dem gleichen Problem wahrscheinlich suchen.
RDA3000
Haben Sie ein ähnliches Problem hier: jsfiddle.net/5n4By/6 . Die Fußzeile berücksichtigt die linke Polsterung ihrer Eltern, läuft jedoch rechts über. Sie würden erwarten, dass es auch die richtige Polsterung
ehrt

Antworten:

186

Lassen Sie uns zunächst sehen, warum dies geschieht.

Der Grund ist, dass überraschenderweise, wenn eine Box position: absoluteihre enthaltende Box hat, die Polsterbox der Eltern ist (dh die Box um ihre Polsterung). Dies ist überraschend, da normalerweise (dh bei Verwendung einer statischen oder relativen Positionierung) das enthaltende Feld das Inhaltsfeld des übergeordneten Elements ist.

Hier ist der relevante Teil der CSS-Spezifikation :

Für den Fall, dass der Vorfahr ein Inline-Element ist, ist der enthaltende Block der Begrenzungsrahmen um die Auffüllfelder des ersten und des letzten für dieses Element generierten Inline-Felds. Andernfalls wird der enthaltende Block durch die Auffüllkante von gebildet der Vorfahr.

Der einfachste Ansatz - wie in Winters Antwort vorgeschlagen - ist die Verwendung padding: inheritauf der absolut positionierten div. Es funktioniert jedoch nur, wenn Sie nicht möchten, dass die absolut positionierte divzusätzliche Polsterung vorhanden ist. Ich denke, die allgemeinsten Lösungen (da beide Elemente ihre eigene unabhängige Polsterung haben können) sind:

  1. Fügen Sie eine zusätzliche relativ positionierte div(ohne Polsterung) um die absolut positionierte div. Dieses neue divwird die Polsterung seines Elternteils respektieren, und das absolut positionierte divwird es dann füllen.

    Der Nachteil ist natürlich, dass Sie nur zu Präsentationszwecken mit dem HTML-Code herumspielen.

  2. Wiederholen Sie die Polsterung (oder fügen Sie sie hinzu) für das absolut positionierte Element.

    Der Nachteil hierbei ist, dass Sie die Werte in Ihrem CSS wiederholen müssen. Dies ist spröde, wenn Sie das CSS direkt schreiben. Wenn Sie jedoch ein Vorverarbeitungswerkzeug wie verwenden SASSoder LESSdieses Problem vermeiden können, indem Sie eine Variable verwenden. Dies ist die Methode, die ich persönlich verwende.

Kevin Christopher Henry
quelle
Warum ist dies die Standardeinstellung für position: absolute? Es ist überraschend, dass die enthaltende Box die Polsterbox ist, aber es muss einen Grund dafür gegeben haben, genau wie ich sicher bin, dass es einen Grund gibt, warum (ohne box-sizing) das width& heightdie Polsterung oder den Rand nicht enthält.
Trysis
1
Nur eine Ergänzung: Nichts davon wird von der box-sizingEigenschaft des Elternteils oder des Kindes beeinflusst. Dies liegt daran, dass sich dies auf die Größe auswirkt , wie in Breite / Höhe, aber nicht auf das enthaltende Feld, obwohl ich zugebe, dass es sinnvoller wäre, wenn es beide betrifft .
Trysis
2
Dies sind gute Informationen, aber es ist die falsche Antwort. Die richtige Antwort lautet unten von Winter .... Verwenden Sie padding: inherit und Ihr Absolute-Element erhält das Polster, das es benötigt. Ich weiß nicht, warum dies mehr positive Stimmen als die richtige Antwort hat ...: P
NotaGuruAtAll
1
@NotaGuruAtAll: Funktioniert padding: inheritgut, wenn für die absolut positionierte Position divkeine eigene Polsterung erforderlich ist, und ich habe diese Technik erwähnt. Es ist jedoch weniger flexibel, da Sie der absolut positionierten Position keine zusätzliche Polsterung hinzufügen können div(dh Sie können es nicht sagen padding: inherit + 5px). Deshalb bevorzuge ich die Techniken, die ich hier erwähne.
Kevin Christopher Henry
1
Das Auffüllen des position:absoluteuntergeordneten Elements funktioniert in der Tat, wenn Sie nur nach dem untergeordneten Element suchen, um das Auffüllen des Elternteils zu respektieren. Wenn Sie dem Kind jedoch zusätzliche Auffüllungen hinzufügen möchten, müssen Sie das Verhältnis der Auffüllungen in Ihrem Code überprüfen. Keine saubere Möglichkeit, dies nur mit CSS zu tun.
Dylan Pierce
51

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

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

Dadurch kann das untergeordnete Element den Abstand vom übergeordneten Element erben. Anschließend kann das untergeordnete Element so positioniert werden, dass es der Breite und dem Abstand des übergeordneten Elements entspricht.

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.

Winter
quelle
Ich habe diese Antwort mit der Antwort von @NewSpender kombiniert. In meinem speziellen Fall ignorierte das absolut positionierte Div die Auffüllung, wurde jedoch durch sein übergeordnetes Element begrenzt. Das absolut positionierte Div mit weißen dicken Rändern zu geben, ahmte die Polsterung nach, die ich brauchte. Voraussetzung ist jedoch, dass Ihr Hintergrund dieselbe Farbe hat.
Ogier Schelvis
OP möchte jedoch nicht, dass das Kind die Polsterung der Eltern erbt. Er möchte, dass das Kind entsprechend der Polsterung der Eltern versetzt wird.
Michael Gummelt
30

Nun, dies ist möglicherweise nicht die eleganteste Lösung (semantisch), aber in einigen Fällen funktioniert es ohne Nachteile: Verwenden Sie anstelle des Auffüllens einen transparenten Rand für das übergeordnete Element. Die absolut positionierten untergeordneten Elemente berücksichtigen den Rahmen und werden genau gleich gerendert (außer Sie verwenden den Rand des übergeordneten Elements für das Styling).

NewSpender
quelle
6

Hier ist mein bester Versuch. Ich habe ein weiteres Div hinzugefügt und es rot gemacht und die Größe deiner Eltern auf 200px geändert, nur um es zu testen. Die Idee ist, dass das Kind jetzt zum Enkelkind und der Elternteil zum Großelternteil wird. Der Elternteil respektiert also seinen Elternteil. 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 zu tun, kann nicht getan werden. Absolute Position bedeutet, dass Sie ihm Koordinaten geben, die er ehren muss. Was ist, wenn der Elternteil eine Polsterung von 5 Pixel hat? Und Sie positionieren das Kind absolut oben: -5px; links: -5px . Wie ist es anzunehmen, die Eltern und Sie gleichzeitig zu ehren?

Meine Lösung

Wenn Sie möchten, dass es die Eltern ehrt, positionieren Sie es dann nicht unbedingt.

Berühren
quelle
Vielen Dank, ich schätze den Beitrag, aber es ist immer noch eine Problemumgehung für das eigentliche Problem. Was ich wirklich wissen möchte, ist, ob Sie Kinder dazu bringen können, die Polsterung des übergeordneten Elements zu ehren. Wenn sich herausstellt, dass die Antwort nein ist, gebe ich Ihnen den Repräsentanten.
d512
Wenn Sie sie absolut positionieren, werden sie ihr übergeordnetes Element nicht ehren. Sie werden dich ehren. Aus dem gleichen Grund, wenn Sie sie nicht absolut positionieren, können Sie Dinge wie bottom: 10px nicht wirklich verwenden, weil sie ihr übergeordnetes Element ehren. Aber was Sie tun möchten, wird vermutlich Raum für einen Widerspruch schaffen und sich daher in den Browsern unterscheiden. Ich denke, nur eine Umgehung reicht aus.
Berühren Sie
3
Die absolute Positionierung ehrt den Elternteil, das ist das verwendete Koordinatensystem. Wenn Sie top 0px sagen, bedeutet dies, dass 0px vom oberen Rand des übergeordneten Elements entfernt ist. Die Frage ist, ob die Polsterung der Eltern berücksichtigt werden soll oder nicht. Wenn der Elternteil eine Polsterung von 5 Pixel hatte und Sie dem Kind oben: -5 Pixel gaben, würde es bündig mit dem Elternteil abschließen, wenn die Polsterung des Elternteils berücksichtigt wurde, oder 5 Pixel über dem Elternteil, wenn dies nicht der Fall war.
d512
3

1.) Sie können keinen großen Rand für Eltern 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 den vollen Rand übernimmt Breite dieses Großelternteils.

Die einzige Lösung, die anwendbar sein sollte, besteht darin, Ihre Kinder in einen anderen Behälter zu wickeln, damit Ihre Eltern Großeltern werden, und dann die neuen Kinderverpackungen / Eltern mit Polstern zu versehen. Oder Sie können die Kinder direkt mit Polstern versehen.

In deinem Fall:

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

Könnte leicht mit einem zusätzlichen Level von Div gemacht 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/

asankasri
quelle
0

Polsterung hinzufügen : Erben Sie an Ihrer absoluten Position

.box{
  background: red;
  position: relative;
  padding: 30px;
  width:500px;
  height:200px;
 box-sizing: border-box;
 

}
<div  class="box">

  <div style="position: absolute;left:0;top:0;padding: inherit">top left</div>
  <div style="position: absolute;right:0;top:0;padding: inherit">top right</div>
  <div style="text-align: center;padding: inherit">center</div>
  <div style="position: absolute;left:0;bottom:0;padding: inherit">bottom left</div>
  <div style="position: absolute;right:0;bottom:0;padding: inherit">bottom right</div>


</div>
Erweitern Sie das Snippet

ßãlãjî
quelle