CODEWITHSUNDEEP
css
Zeyad Etman
Zeyad Etman

Reputation: 2560

I can't handle a z-index with position absolute

Hhere's a codesandbox that running the code, you'll figure out that more button (3 dots) is displayed over the more-menu. Click on the 3 dots to see what i mean.

Here's the css code of more-menu:

.more-menu {
  position: absolute;
  top: 100%;
  z-index: 900;
  float: left;
  width: fit-content;
  margin-top: 29px;
  margin-left: calc(50% - 45px);
  background-color: #fff;
  border: 1px solid #ccd8e0;
  border-radius: 4px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  opacity: 0;
  -webkit-transform: translate(0, 15px) scale(0.95);
  transform: translate(0, 15px) scale(0.95);
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  pointer-events: none;
}

.more-dot {
  background-color: #d7262c;
  margin: 0 auto;
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-radius: 50%;
  transition: background-color 0.3s;
}
<div class="show-more-menu">
  <button id="more-btn">
    <span class="more-dot" />
    <span class="more-dot" />
    <span class="more-dot" />
  </button>
  <div class="more-menu" aria-hidden="true">
    <div class="more-menu-caret">
      <div class="more-menu-caret-outer" />
      <div class="more-menu-caret-inner" />
    </div>
  </div>
</div>

Upvotes: 0

Views: 61

Answers (1)

Chris B.
Chris B.

Reputation: 5763

Using the transform property on your container elements is giving them their own stacking context which is inherited by the more containers. And since your buttons and menus are sibling elements, the z-index property has no bearing on their positions relative to one another. A simple fix would be to just remove the transform from your .container elements and find another way to position them the way you want. I would give a suggestion but I'm not quite sure of the effect you're going for.

I made a fork where I just removed the transform and top: 100% from the menu, it's centered but stacks as you wanted.

Upvotes: 1

Related Questions