CODEWITHSUNDEEP
htmlcss
10110
10110

Reputation: 2695

How to prevent sibling elements from stacking?

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>

Upvotes: 1

Views: 272

Answers (4)

Tanner Dolby
Tanner Dolby

Reputation: 4441

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>

Upvotes: 1

Sharath Xavier
Sharath Xavier

Reputation: 1

.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>

Upvotes: 0

codeR developR
codeR developR

Reputation: 497

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>

Upvotes: 1

Adiat Hasan
Adiat Hasan

Reputation: 411

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

button{
    position: relative;
}
button:hover{
    z-index: 100;
}

Upvotes: -1

Related Questions