Can anyone help me achieve the following setup?
I have a scenario where I need one div to be positioned absolutely, and another div as a simple block element overlapping the absolute container. This image illustrates what I'm trying to accomplish:
The red box is the absolutely positioned element and the blue box is a standard block element (inside a flexbox).
https://i.sstatic.net/0IBmK.pngI've attempted using z-index to achieve this effect, but it hasn't been successful.
Thank you for any assistance.
Edit: For more context, here's a fiddle with my code:
https://jsfiddle.net/xzp284vn/
<div class="container">
<div class="block">
</div>
<div class="absolute">
</div>
</div>
.container {
display: flex;
justify-content: flex-end;
position: relative;
width: 400px;
height: 300px;
}
.block {
border: 1px solid blue;
width: 40px;
height: 300px;
}
.absolute {
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 40px;
background: yellow;
}