Reputation: 2560
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
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