CODEWITHSUNDEEP
htmlcss
cak3_lover
cak3_lover

Reputation: 1958

How to ignore a middle <div>?

I want to create a sticky background which starts to stick after the header is scrolled out of frame

so far this is my progress

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.header
{
 width:100%;
 background-color:black;
 height:100px;

}
div.sticky {

  position: -webkit-sticky;
  position:sticky;
  width:100%;
  top: 0;
  z-index: -1;

}
#contain
{   
    width: 50%;
    background-color: yellow;
    margin: auto;
    padding-left: 100px;
    padding-right: 100px;
    height: 1000px;
    clear:both;
  
}
</style>
</head>
<body>
<div class="header"></div>
<div class="sticky"><img src="https://images.all-free-download.com/images/graphicthumb/small_mouse_macro_515329.jpg" style="background-size: cover;    flex-shrink: 0;min-width: 100%;min-height: 100%;  "></div>
<div id="contain">
<h2>Scroll </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut
</p>
</div>



</body>
</html>

but the yellow div is below the image, whereas I need it to start below the black header so is there anyway to "ignore" the middle image wrapper <div>?
(I'm a beginner so please provide the simplest possible solution)

Upvotes: 0

Views: 86

Answers (1)

Temani Afif
Temani Afif

Reputation: 273626

Make its height 0:

.header {
  background-color: black;
  height: 100px;
}

div.sticky {
  position: sticky;
  top: 0;
  z-index: -1;
  height:0;
}

div.sticky img {
  width: 100%;
}

#contain {
  width: 50%;
  background-color: yellow;
  margin: auto;
  padding:10px 100px;
  height: 1000px;
}
<div class="header"></div>
<div class="sticky"><img src="https://images.all-free-download.com/images/graphicthumb/small_mouse_macro_515329.jpg"></div>
<div id="contain">
  <h2>Scroll </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut
  </p>
</div>

Or consider a hack using float and shape-outside:

.header {
  background-color: black;
  height: 100px;
}

div.sticky {
  position: sticky;
  top: 0;
  z-index: -1;
  float:left;
  width: 100%;
  shape-outside:inset(50%);
}

div.sticky img {
  width: 100%;
}

#contain {
  background-color: yellow;
  margin:0 20%;
  padding:10px 100px;
  box-sizing:border-box;
  height: 1000px;
  display:inline-block;
}
<div class="header"></div>
<div class="sticky"><img src="https://images.all-free-download.com/images/graphicthumb/small_mouse_macro_515329.jpg"></div>
<div id="contain">
  <h2>Scroll </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut
  </p>
</div>

Upvotes: 2

Related Questions