Buttons Z-Index blocking each other, no matter the value.

In the case of the two buttons "R" and "D", seen above, both have the same Z-Index. "R" is clickable and "D" is not". When "D" has a Z-Index greater than 1, "D" is clickable, but "R" is not. No matter the value, the button with the higher Z-Index always wins, while the other is unclickable due to some weird invisible overlay on the buttons. As stated, setting them to the same z-index causes only "R" to work. Any help is appreciated. Code below: HTML: <div class="sheet-wep1dmg sheet-block">         <label style="text-align:center;color: #000000;"><button type="roll" value="/roll @{wep1die} + @{wep1mod}" name="roll_wep1dmg"></button><br>D</label> </div>      <div class="sheet-wep1roll sheet-block">         <label style="text-align:center;color: #000000;"><button type="roll" value="/roll 1d20 + @{wep1mod}" name="roll_wep1roll"></button><br>R</label> </div> CSS: .charsheet div.sheet-wep1dmg{     grid-area: weproll;     justify-content: right;     margin-top: 43px;     padding: 0px;     border: none; } .charsheet div.sheet-wep1roll{     grid-area: weproll;     justify-content: left;     margin-top: 43px;     padding: 0px;     border: none; }

hard to tell for sure w/out a little more code. (ie block and the parent grid element class) You probably shouldn't need z-index here.  My guess is that using the same grid-area: weproll; in both classes could be causing them to actually overlap each other.  I would add another grid-area for damage (ie "weprolldamage") so they are inline with each other. example parent grid class; .sheet-weapon-grid { grid-template-area: "weapon weproll weprolldamage" } and then just change your .sheet-wep1dmg class to match; .charsheet div.sheet-wep1dmg {     grid-area: weprolldamage; ... See if that helps.

vÍnce said: hard to tell for sure w/out a little more code. (ie block and the parent grid element class) You probably shouldn't need z-index here.  My guess is that using the same grid-area: weproll; in both classes could be causing them to actually overlap each other.  I would add another grid-area for damage (ie "weprolldamage") so they are inline with each other. example parent grid class; .sheet-weapon-grid { grid-template-area: "weapon weproll weprolldamage" } and then just change your .sheet-wep1dmg class to match; .charsheet div.sheet-wep1dmg {     grid-area: weprolldamage; ... See if that helps. Such a simple solution! Breaking it up into two grid areas worked. Thank you so much!