How to prevent sibling elements from stacking? - html

Question

I need a button group like the one shown in the code below and want to apply a border-shadow when the user hover's on top of a button.
The elements seem to be staking on top of each other from left to right, covering the right side's border-shadow.
How can I prevent this?
I tried z-index and doesn't work on my code but I can see it working on other people's code snippets...
.btn:hover {
box-shadow: 0 0 0 0.2rem red
}
div {
display: flex;
}
<div>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
</div>

Answer 1

When you create a flex container with display: flex the <button> elements group together and the space in between each element is removed. To prevent this and allow your box-shadow to be more visibly seen, you could just add a bit of margin to each child <div> in the flex container.
If you don't want to add margin to separate the buttons, you can add the z-index property to the buttons hovered state so when you hover a <button> the box shadow appears and "stacks" above the other buttons. Remember, z-index only works on "positioned" elements:
postion: relative
position: absolute
position: fixed
position: sticky
From the Flexible Box Layout Spec, "Flex items do respect z-index" so if you have items in a flexbox container, they are eligible to utilize z-index without explicitly adding position.
.btn:hover {
box-shadow: 0 0 0 0.2rem red;
box-shadow: 0 0 0 0.2rem rgba(233, 181, 12, 0.6);
z-index: 99;
}
div {
display: flex;
}
div > button {
/* margin: 0 .5rem; */
/* position: relative; not necessary for flexbox children */
}
<div>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
</div>

Answer 2

All you need to do is give a z-index to the hovered button
.btn:hover {
box-shadow: 0 0 0 0.2rem red;
z-index: 1000
}
div {
display: flex;
}
<div>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
</div>

Answer 3

.btn{
margin:5px 10px;
}
.btn:hover {
box-shadow: 0 0 0 0.2rem red
}
div {
display: flex;
}
<div>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
<button class="btn">
BTN
</button>
</div>

Answer 4

Give the button position relative. Then make the z-index: 100; on hover
button{
position: relative;
}
button:hover{
z-index: 100;
}