I am currently facing a challenge where I need to position an element under another one that has already been relatively positioned. The blue box must remain relatively positioned due to specific constraints within the website development process.
For better visualization, think of the blue box as a speech bubble with the tail represented by the :after pseudo-element. My objective is to place the green box behind both of these elements, serving as a background for them.
div.layer01 {
background-color: blue;
position: relative;
z-index: 10;
}
div.layer01:after { /* This represents the tail of the bubble */
display: block;
background-color: red;
content: '\00a0';
width: 30px;
height: 30px;
position: absolute;
right: 20px;
top: 50px;
border: 3px #fff solid;
}
/* This should be positioned behind the tail and the blue box (bubble) */
div.layer01 div.layer02 {
background-color: green;
width: 320px;
height: 125px;
display: block;
position: absolute;
z-index: 5;
}<div class="layer01"> <!-- speech bubble -->
<div class="layer02">Why isn't this below the blue?</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non dolor quis leo malesuada pharetra at in massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>Solution:
In order to position the element correctly, I removed it from the relatively positioned container and placed it inside a new div. While this resulted in additional markup, it proved to be the only effective way to achieve the desired positioning.