CODEWITHSUNDEEP
htmlcsspositionz-index
Dennis
Dennis

Reputation: 605

CSS Z-Index not working on absolute positioning

I have the following situation: There are several div containers in my code.

.outside {
  position: relative;
  z-index: 1;
}
.options {
  position: absolute;
  z-index: 999;
}
<div class="outside">
  <div class="inside">
    <div class="options">Content</div>
  </div>
</div>

The Selection of three divs above is repeated several times. The problem i have now is that the outside div will overlap the options div. I tried to set this up with the z-index but it is not working. Does anyone have a solution for this?

Upvotes: 2

Views: 4245

Answers (1)

Ionut Necula
Ionut Necula

Reputation: 11472

Move position:relative; and the z-index from .forum_post_outside to .forum_arrow_outside, also remove position: absolute; from .forum_arrow_outside, also added float: right; to .forum_arrow_outside: 

.forum_post_outside {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  min-height: 75px;
  padding: 0 5px;
  width: 100%;
  background-color: #333;
  margin-bottom: 2px;
}
.forum_arrow_outside {
  position: relative;
  z-index: 1;
  float: right;
  width: 150px;
}
.forum_arrow_top {
  position: absolute;
  top: 0;
  right: 0;
}
.forum_arrow_inside {
  max-width: 110px;
  -moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  background-color: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
}
.forum_drop_down {
  margin: 0!important;
  margin-top: 10px!important;
  line-height: 20px;
  min-width: 110px;
  border-bottom: 1px solid #ccc;
  color: #000;
  
}
<div class="forum_post_outside">
  <div class="forum_arrow_outside">
    <div class="forum_arrow_inside">
      <div class="forum_drop_down">
        <img src="/images/delete_16.png">Delete</div>
      <div class="forum_drop_down">
        <img src="/images/unpin-16.png">Unpin</div>
      <div class="forum_drop_down">
        <img src="/images/edit_16.png">Edit</div>
    </div>
  </div>
</div>

<div class="forum_post_outside">

</div>

<div class="forum_post_outside">

</div>

Upvotes: 2

Related Questions