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?

You know you have to set the position to relative for a zindex to work, right? — mattdevio, Dec 02 '15 at 17:43

score 6 · Accepted Answer · answered Dec 02 '15 at 17:44

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>

score 2 · Answer 2 · edited May 23 '17 at 12:15

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

edited May 23 '17 at 12:15

Community

1
1

answered Dec 02 '15 at 17:45

Lal

14,726
4
45
70

score 1 · Answer 3 · answered Dec 02 '15 at 17:49

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;
}

Make buttons behind div it is in with CSS

3 Answers3

See this fiddle