CSS: get button overlapped by div, z-index not working
Can anyone figure out how to overlay a button on flyout-content
so that the straight border of the button is hidden? I want to get this effect:
I tried to change the z-index
content and the button, however it doesn't work.
Html
<div class='flyout'>
<button class="flyout-toggle">Click</button>
<div class="flyout-content"></div>
</div>
CSS
.flyout-toggle {
position: absolute;
transform: rotate(90deg);
top: 50%;
left: -50px;
z-index: 998;
width: 85px;
height: 35px;
font-size: 13px;
background: #92C7B8;
border: solid #fff 1px;
}
.flyout-content {
z-index:997
}
.flyout {
position: fixed;
z-index: 999;
top: 0;
right: 0;
width: 15%;
height: 100%;
border-left: solid #fff 1px;
background: #92C7B8;
-webkit-box-shadow: 0px -5px 15px 0px #bfbfbf;
box-shadow: 0px -5px 15px 0px #bfbfbf;
transition: all .3s ease-in-out;
}
source to share
jus add this border:none;
.flyout-toggle {
background: none repeat scroll 0 0 #92c7b8;
border: medium none;
font-size: 13px;
height: 35px;
left: -50px;
position: absolute;
top: 50%;
transform: rotate(90deg);
width: 85px;
z-index: 998;
}
but if you need a border you can add it wherever you need, i.e. border-top border-left border-right; e.g. DEMO
source to share
Elements z-index
must be at the same level. In your situation, flyout
has the largest z-index
, but it is the parent flyout-toggle
that is the smallest.
Try it like this:
HTML:
<div class="parent">
<button class="flyout-toggle">Click</button>
<div class="flyout"></div>
</div>
CSS
.parent{
position: fixed;
top: 0;
bottom:0;
right: 0;
height:100%;
width: 15%;
}
Now I have placed the styles position:fixed
in parent
and not in the child flyout
.
Check out the complete script , you will notice that the right side of the button cannot be pressed because flyout
it is.
source to share