After extensive searching on Google and Stack Overflow, I finally found what seemed like the perfect solution. The logic behind it made sense and I understood it perfectly. But when I implemented it, my absolute positioned divs kept moving whenever I resized the browser window. I even tried putting them into a relative container, but they still didn't behave as expected. It's clear that I must be missing something crucial, so I'm reaching out for help in identifying the issue.
<div id="wrapper">
<div id="logo">
<img src="zgodalogotyp.png" width="240px">
</div>
<div id="line"></div>
<div id="box"></div>
</div>
and css:
#wrapper {
height: auto;
margin-top: 0;
margin-bottom: 50px;
margin-left: 30px;
margin-right: 30px;
padding: 10px;
background-color: white;
position: relative;
background-position: center;
z-index: 0;
clear: both;
}
#box {
position: absolute;
margin-top: 265px;
right: -30px;
width: 400px;
height: 250px;
background-color: #624051;
z-index: 10;
clear: both;
}
#line {
margin-top: 254px;
height: 56px;
width: 455px;
background-color: #000000;
opacity: 0.2;
z-index: 11;
right: -30px;
position: absolute;
}
This issue is not isolated to just these divs in my code; there are many more where the same problem persists. While I've followed similar patterns with their positioning, I can't seem to pinpoint the exact cause of the misalignment. Any assistance would be greatly appreciated.