Make buttons behind div it is in with CSS

Question

I have some html that includes some buttons wrapped in a div class.

 .addshade { left: 0; width: 100%; height: 100%; z-index: 100000; background: rgba(0, 0, 0, 0.75); display: block; } .cbutton { cursor: pointer; display: inline-block; font-family: Roboto; font-weight: 700; font-size: 16px; border-radius: 5px; padding: 5px 6px; min-width: 90px; text-decoration: none; -webkit-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: -1000; } 

 <div class="addshade"> <p class="description"></p> <div class="options"> <a class="buy cbutton whiteonpurple" target="_blank" href="http://www.apple.com/shop/buy-watch/apple-watch">Buy</a> <a class="hint cbutton whiteonblack" target="_blank">Hint</a> </div> <div class="info" style="display: none;"> <div class="bar"></div> <div class="rehints" id="rehint_55cd0ef28ead0e883c8b4567" style="visibility: hidden;">10 REHINTS</div> <div class="hinter" style="visibility: hidden;"> <div class="picture monophoto"> <div class="text" style="font-size: 37px; margin-top: 4.375px;">SO</div> <div class="img" style="background-image: url(http://graph.facebook.com/filler/picture?type=large);" onclick="location.href='/user/filler';"></div> </div> <div class="content"> <div class="one">Hinted by:</div> <div class="two"><a href="/user/sean12oshea">Sean O'Shea</a> </div> </div> </div> <div class="partnertext">Partnered Hint</div> <div style="clear:both;"></div> </div> </div> 

Even with the z-index the buttons are showing in front of the shading that I want:

However, the buttons are in front and clickable. How do I get the desired behavior?

Answer 1

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed) .

Therefore add position:relative; to .cbutton

 .addshade { left: 0; width: 100%; height: 100%; z-index: 100000; background: rgba(0, 0, 0, 0.75); display: block; } .cbutton { cursor: pointer; display: inline-block; font-family: Roboto; font-weight: 700; font-size: 16px; border-radius: 5px; padding: 5px 6px; min-width: 90px; text-decoration: none; -webkit-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: -1000; position: relative; } 

 <div class="addshade"> <p class="description"></p> <div class="options"> <a class="buy cbutton whiteonpurple" target="_blank" href="http://www.apple.com/shop/buy-watch/apple-watch">Buy</a> <a class="hint cbutton whiteonblack" target="_blank">Hint</a> </div> <div class="info" style="display: none;"> <div class="bar"></div> <div class="rehints" id="rehint_55cd0ef28ead0e883c8b4567" style="visibility: hidden;">10 REHINTS</div> <div class="hinter" style="visibility: hidden;"> <div class="picture monophoto"> <div class="text" style="font-size: 37px; margin-top: 4.375px;">SO</div> <div class="img" style="background-image: url(http://graph.facebook.com/filler/picture?type=large);" onclick="location.href='/user/filler';"></div> </div> <div class="content"> <div class="one">Hinted by:</div> <div class="two"><a href="/user/sean12oshea">Sean O'Shea</a> </div> </div> </div> <div class="partnertext">Partnered Hint</div> <div style="clear:both;"></div> </div> </div> 

Answer 2

See this fiddle

See the answer here . It says,

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Thus add

z-index: -1000;
position: relative;

to .cbutton

Answer 3

For a positioned box, the z-index property specifies: 1) The stack level of the box in the current stacking context. 2) Whether the box establishes a local stacking context.

Z-index is heavy influenced by the stacking context . I'd like to highlight

Positioning and assigning a z-index value to an HTML element creates a stacking context

So i'd personally go with a position relative on both the elements in order to put both in the same stacking context

.addshade, .cbutton {
    position: relative;
}