I have two divs, div1 and div2. I wanted div2 below div1 because I have used position absolute property in div1. Div2 is going above div1

I wanted to use position absolute because I wants to position div1 at bottom left corner

.home {
  position: absolute;
  border: 2px solid green;
  top: 50%;
  left: 8px;
  padding: 33px 23px;
  line-height: 60px;
  display: block;
}

.about {
  display: block;
  border: 2px solid red;
}

<div class="home">div1</div>
<div class="about">div2</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

To immediately solve your problem, I would suggest wrapping both of these divs in another element, then positioning that new outer element absolutely at the bottom left:

.container {
  /* position in the bottom left*/
  position: absolute;
  bottom: 0;
  left: 0;
}

.home {
  border: 2px solid green;
  padding: 33px 23px;
  line-height: 60px;
}

.about {
  border: 2px solid red;
}

<div class="container">
    <div class="home">div1</div>
    <div class="about">div2</div>
</div>

There are many ways to solve the same problem in CSS however, and which is the best largely depends on the context. There's not really enough information in your question to give a definitive answer, or even to be sure the above will work as expected in your case.

CodePudding user response：

If you want to have the div1 in lower left corner, and want div2 below the div1, then:

• you can enclose the 2 divs in another div, and have the position: absolute; for that div

• and also, instead of top: 50%;, you can have bottom: 0.

  • This will make sure that, the parent div is placed exactly at the bottom left corner (and not on left edge).

• And you can remove the position: absolute; from div1.

  • This way, you can be sure that div2 will appear below div1, as both these divs will not have position set as absolute, and they will appear relative to each other.

.home {
  border: 2px solid green;
  padding: 33px 23px;
  line-height: 60px;
  display: block;
}

.about {
  display: block;
  border: 2px solid red;
}

.bottomLeft {
    position: absolute;
    bottom: 0;
}

<div class="bottomLeft">
    <div class="home">div1</div>
    <div class="about">div2</div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Edit 1: Modified top: 50%; to bottom: 0;, and improved formatting.