CODEWITHSUNDEEP
htmlcss
Tom Thomson
Tom Thomson

Reputation: 442

Interact with elements with lower z-index

I have a problem with my sidebar.

html, body {
  height: 100%;
  margin: 0;
}
.sidebar{
  display: inline-block;
  height: 100%;
  width: 100px;
  box-shadow: 3px 0px 100px 0px rgba(0, 0, 0, 0.16);
  background-color: #fff;
}
.content {
  position: absolute;
  top: 0;
  padding-left: 100px;
  width: 100%;
  height: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #EEF2F8;
  z-index: -1
}
.section {
  display: block;
  height: 100px;
  background-color: #fff;
}
<div class="sidebar">

</div>

<div class="content">
  <div class="section">
    <a href="#">You can't interact with me :(</a>
  </div>
</div>

I need to interact with the content but when I put a higher z-index on the .content the shadow wouldn't be displayed anymore. So I could separate the background from the .content but I want to add sections with different backgrounds and they would also don't have shadow on them.

I also made it that the sidebar don't cover the whole screen but you still can't interact with the right side.

Upvotes: 0

Views: 1631

Answers (1)

JasonB
JasonB

Reputation: 6368

The problem is setting z-index to -1 on your content. Instead of setting a negative value on the element in the background, set a higher value on elements that should be in front. You can add a z-index value to the sidebar and get the behavior you are looking for if you have position set to relative.

html, body {
  height: 100%;
  margin: 0;
}
.sidebar{
  position: relative;
  z-index: 1;
  display: inline-block;
  height: 100%;
  width: 100px;
  box-shadow: 3px 0px 100px 0px rgba(0, 0, 0, 0.16);
  background-color: #fff;
}
.content {
  position: absolute;
  top: 0;
  padding-left: 100px;
  width: 100%;
  height: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #EEF2F8;
}
.section {
  display: block;
  height: 100px;
  background-color: #fff;
}
<div class="sidebar">

</div>

<div class="content">
  <div class="section">
    <a href="#">You can interact with me :)</a>
  </div>
</div>

Upvotes: 2

Related Questions