CODEWITHSUNDEEP
htmlcss
Nero
Nero

Reputation: 13

CSS issue: <div> element overlaying other <div> elements when trying to put it below

I am starting my approach to CCS and I face my first difficulties.

I have a <div> container and 2 overlaying <div> elements inside the container managed by CSS classes. These three elements are working properly as I want.

But when I add an other element outside the container that I am expecting to show up below the container it overlays on the other elements. I tried to use flexbox instructions but it did not work.

.container {
  width: 100%;
  position: relative;
  
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
  background: #0057e3;
}

.overlay {
  z-index: 9;
  width: 20%;
  position: absolute;
  margin-top: 600px;
  margin: 70px;
  background: #009938;
}

.imgA {
  max-width: 300px;
  max-height: 450px;
  display: block;
}
<div class="container">
  <div class="box"><img src="yyyyyyyyyyyyy"></div>
  <div class="box overlay">
    <img class="imgA" src="xxxxxxxxxxxxx">
  </div>
</div>

<div>
  <h1>Why this one overlays?</h1>
</div>

Upvotes: 0

Views: 73

Answers (2)

Joseph NG
Joseph NG

Reputation: 1

Try this code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{
            text-align: center;
        }
        .container {
          width: 100%;
          position: relative;
          /* background-color: #0057e3; */
          
        }
        
        .box {
          width: 100%;
          /* height: 100%; */
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0.7;
          background: #0057e3;
        }
        .box img{
            height: 400px;
        }
        
        .overlay {
          z-index: 2;
          /* width: 20%; */
          position: relative;
          margin-top: 600px;
          /* margin: 70px; */
          background: #009938;
        }
        
        .imgA {
          max-width: 300px;
          max-height: 450px;
          display: block;
        }
        .section-2{
            border: 1px solid #0057e3;
        }
        </style>
</head>
<body>


<div class="container">
    <div class="box">
        <img src="pic2.JPG">
    </div>
    <div class="box overlay">
      <img class="imgAh" src="pic1.JPG">
    </div>
  </div>
  
  <div class='section-2'>
    <h1>Why this one overlays?</h1>
  </div>
</body>
</html>

Upvotes: 0

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8118

.container does not have a height set and that's where the main problem is happening in your case.

Since there are two absolute positioned divs within your container. The two divs comes out of the normal flow. And your container height stays 0. Since you are not explicitly giving any height to container div.

If you add some height to the container, that will take height in the normal flow and overlay of last div would not happen.

.container {
  width: 100%;
  position: relative;
  left:0;
  top:0;
  border:1px solid #ccc;
  height:400px; /* Added Height */
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
 
}

.overlay {
  z-index: 9;
  width: 20%;
  position: absolute;
  margin: 70px;
}

.imgA {
  max-width: 300px;
  max-height: 450px;
  display: block;
}
 <div class="container">
    <div class="box overlay">
      <img src="https://picsum.photos/200/300"/>
    </div
    <div class="box overlay">
      <img class="imgA" src="https://picsum.photos/200/300"/>
    </div>
</div>

<div>
  <h1>Why this one overlays?</h1>
</div>

Upvotes: 1

Related Questions