0

I was playing around with position absolute relative and sticky
and I can't seem to understand why the parent div "back" (blue) isn't completely wrapping around "content" (yellow) div? instead it's only wrapping around "wallpaper"
also is there any solution to fix this?

#header {
  width: 100%;
  height: 100px;
  font-family: "Sans-serif", Verdana;
  background-color: black;
  color: white;
  font-size: 25px;
  
}

#back {

  height: 100%;
  background-color: blue;
  position:relative;

}

#content {
  background-color: yellow;
  width: 50%;
  margin: auto;
  position: absolute;
  z-index:1;
}

#wallpaper {
  background-image: url("https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg");
  height: 100px;
  position: sticky;
  top:0;

}
<!DOCTYPE html>
<html>
<head>
</head>

<body>
<div id="header">home</div>
 <div id="back">
  <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exeat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exequa. Ut enim ad minim veniam, quis nostrud exercitation uls aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="wallpaper"></div>
 </div>
 
</body>
</html>

EDIT
I realize that the absolute div is being taken out of flow, I should have been more clear and ask whether there is any way to keep the div in the doc flow while having the effect of position:absolute or is there an altogether different way of placing the "wallpaper" as a sticky below the header (without knowing the height of header)?

cak3_lover
  • 1,440
  • 5
  • 26
  • When you position an element absolutely (in this case, the child), it is taken out of the document flow. – Terry Mar 02 '21 at 11:04
  • that is what absolut is for, it is out of element flow and positioned relative to next relative psoition parent. To fix it you need to change your structure. What do you want to achive? – Jarlik Stepsto Mar 02 '21 at 11:05
  • @Jarlik Stepsto I just realized what you and Terry were saying ,my bad. However is it possible to use some other form which will allow the div to be taken into the doc flow while having the same effect as position:absolute? – cak3_lover Mar 02 '21 at 11:08
  • can you make an image of what you want to build? For example you could use a wrapper div with position absolute and all children with position relative. But without knowing, why you need position: absolute it is hard to suggest something – Jarlik Stepsto Mar 02 '21 at 11:32

0 Answers0