How can I make a button appear on top of another one without using position:absolute?
I want to render a control that will appear on the right side, on top of another control that takes 100% of the width of the container.
An example of what I want (with buttons):
I tried to achieve this by setting a high value for the z-index attribute of the small button. This does not work though.
My attempt:
.mydiv {
display: flex;
flex-direction: row;
}<div class="mydiv">
<button style="width:100%; height:30px;">big button</button>
<button style="width:80px; height:20px; z-index:99;">smallbutton</button>
</div>However I get this:
Any idea how to achieve this using flexbox and without position:absolute if possible?
This a job of CSS grid where you can put both elements on the same area:
.mydiv {
display: grid;
}
.mydiv>button {
grid-area: 1/1;
}<div class="mydiv">
<button style="width:100%; height:30px;">big button</button>
<button style="width:80px; height:20px;place-self: center end">smallbutton</button>
</div>