Positioning of Div in Browser with Absolute scheme - html

Question

I have 2 Divs both of which are subject to absolute position condition. First Div has top: 200px and second one has top: 400px. However surprisingly, when I see them in Computers with different screen size, their relative positions look quite different. For example, when I see them in Laptop they appear to be closer to each other, whereas when I see then in wide-screen Desktop, they appear to be far.
I wonder, since I have position: absolute for both Divs, shouldn't their relative position be same regardless the screen size I chose?
What I need to do to make them appear in the same position relative to each other regardless the screen size?
CSS details for both Divs
.one {
margin: 0 auto;
padding: 32px 0 0 0;
background-color: rgba(248, 248, 255, 0.15);
height: 140px;
position: absolute;
top: 134px;
width: 100%;
text-align: center;
}
.two {
position: absolute;
margin: auto;
top: 237px;
bottom: 0;
left: 0;
right: 0;
text-align: center;
align-items: center;
}
Thanks for your advice.

Answer 1

The problem is that you're using bottom: 0 for the second div, instead of a height. This means that the bottom of your second div will always be at the bottom of the page, so if you resize it, this div will become taller proportionally to the height of your screen size.
To fix this, I removed the top, left and right positioning and instead applied a height (like in your first div) and a width of 100%.
.one {
position: absolute;
margin: 0 auto;
padding: 32px 0 0 0;
background-color: pink;
height: 140px;
top: 134px;
width: 100%;
text-align: center;
}
.two {
height: 100px;
width: 100%;
position: absolute;
margin: auto;
background-color: steelblue;
top: 237px;
text-align: center;
align-items: center;
}
<div class="one"></div>
<div class="two"></div>

Answer 2

This can be one solution.
*{box-sizing:border-box;}
.one {
position: absolute;
margin: 0 auto;
padding: 32px 0 0 0;
background-color: pink;
height: 140px;
top: 134px;
width: 100%;
text-align: center;
}
.two {
height: 140px;
width: 100%;
position: absolute;
margin: auto;
background-color: steelblue;
top: 274px;
text-align: center;
align-items: center;
}
<div class="one"></div>
<div class="two"></div>
The other solution is to just group them into 1 div, make make that div absolute.
The advantage of this is that u dont have to maintain positioning of 2 divs. Only the parent is enough
* {
box-sizing: border-box;
}
.parent {
position: absolute;
top: 134px;
width:100%;
left:0;
right:0;
}
.one {
margin: 0 auto;
padding: 32px 0 0 0;
background-color: pink;
height: 140px;
width: 100%;
text-align: center;
}
.two {
height: 140px;
width: 100%;
margin: auto;
background-color: steelblue;
text-align: center;
align-items: center;
}
<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>

Answer 3

In other to make look same regardless of screen size, you have to set the properties say left=0 , right=0 and bottom=0for bottom div and then you could control the height using different top values. Doing this you have make both div behave like a block container with absolute position and their placement will not shift each other like relative.
.one {
margin: 0 auto;
padding: 32px 0 0 0;
background-color: red;
height: 140px;
position: absolute;
top: 134px;
left: 0;
right: 0;
bottom:0;
width: 100%;
text-align: center;
border: 1px solid blue;
}
.two {
position: absolute;
margin: auto;
top: 237px;
bottom: 0;
left: 0;
right: 0;
text-align: center;
align-items: center;
background-color: green;
border: 1px solid blue;
}
<div class="one">
1
</div>
<div class="two">
2
</div>