Inhalt nach fester Position

Question

Die Position ist etwas, das mich wirklich verwirrt, wie der Name, absolute oder relative. Ich versuche, ein einfaches Layout zu erstellen, wo die Überschrift statisch sagt, und wenn etwas hinzugefügt oder mehr/weniger gelöscht in die .filter Klasse selbst anpassen, aber jetzt meine .filter die Klasse beginnt von oben, während es sollte relativ sein zu .subheading.

Was mache ich falsch?

https://codepen.io/codearts/pen/GvEoBZ

.header{ 
 
    position:fixed; 
 
    background:black; 
 
    height:60px; 
 
    width:100% 
 
} 
 
.subheader{ 
 
    height:40px; 
 
    background:grey; 
 
    position:absolute; 
 
    top:60px; 
 
    width:100%; 
 
} 
 
.filter{ 
 
    position:absolute; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-12"> 
 
     <div class="header"></div> 
 
     <div class="subheader"> 
 
     This can be either 
 
     </div> 
 
    </div> 
 
    <div class="filter"> 
 
     <div class="col-6"> 
 
      This can be col-1 
 
     </div> 
 
      <div class="col-6"> 
 
     This can be col-2 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Ich versuche, Ihr Problem zu lösen, nicht sicher, dass dies auf Ihre Situation helfen wird, versuchen Sie es bel ow [Fidder] [1].

Was Sie tun sollten, ist alle drei div in einen einzigen Container zu setzen und Padding-Top als feste Kopfhöhe zu setzen. Und lassen Sie Subheader und Filter wie es ist. Sie müssen nicht positioniert werden.

[1]: https://jsfiddle.net/rajsnd08/5mra9tsv/2/ 

Answer 2

Keine Notwendigkeit für .filters und .subheader in position:absolute sein.

Es ist komplexer als das, aber kurz gesagt, absolute Position können Sie ein Element aus dem Fluss entfernen und platzieren Sie es in Bezug auf seine Eltern. Aber dazu müssen seine Eltern in position: relative sein, aber ich denke nicht, dass du es in diesem Fall brauchen würdest.

einfach eine margin-top zu .subheader hinzufügen und es wird den Trick tun :)

(eigentlich als un Johannes Kommentar)

EDIT

Lösung in Geige: https://jsfiddle.net/derdnjzs/