Absolute position gets hidden conditionally

Hello I am a newbie here in web development. I am having some question with CSS position property. Initially, following is my HTML and CSS code.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="test.css" type="text/css">
    <title>Test</title>
  </head>
  <body>
    <div class="one">
      
    </div>

    <div class="two">

    </div>

    <div class="three">
      
    </div>

 </body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
}

.one {
  background-color: indigo;
  color: white;
  height: 100px;
  position: absolute;
}

.two { 
  height: 1000px;
  background-color: chartreuse;
}

.three {
  height: 300px ;
  background-color: crimson;
  position: absolute;
}

I have set absolute position for classes one and three. And these div’s no longer are part of the normal document flow. So div with class two takes all the space. I am providing a JSFiddle link for the output.

As, we can see, the class two div takes all the space. We do not see class one and three at all as they are no longer part of the normal document flow. Now, I put some text inside class one and three.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="test.css" type="text/css">
    <title>Test</title>
  </head>
  <body>
    <div class="one">
      <h1>This is start</h1>
    </div>

    <div class="two">

    </div>

    <div class="three">
      <h1>This is end</h1>
    </div>

  </body>
</html>

I have not changed the CSS. Now, here is the link to new JSFiddle output. As we can see, classes one and three are now visible. But, class one has been partially overlapped by class two as all other space is taken by class two. But class three is just apart from class two. So, I have two questions here. When we included the text in classes one and three, why did they appear even if the position is absolute ? And why class two is behaving differently with class one and class three when the text is introduced ?

Thanks

Can anybody help me here ?

Out of normal flow does not mean out of view, it just means the top left corner of the parent (or body) will be the draw location. Since both absolutely positioned divs have the same reference point, one is drawn above the other. The last one to be drawn is the one we see.

1 Like