CODEWITHSUNDEEP
htmlcssz-index
RedGiant
RedGiant

Reputation: 4748

CSS : get a button overlapped by a div,z-index not working

Fiddle Example

Can anyone figure out how to get the button overlapped by flyout-content so that the right border of the button is hidden ? I want to get this effect:

enter image description here

I have tried changing the z-index of the 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;
}

Upvotes: 3

Views: 5122

Answers (4)

Alex Wilson
Alex Wilson

Reputation: 2419

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 where you need ie border-top border-left border-right; like this DEMO

Upvotes: 5

jay
jay

Reputation: 44

in .flyout-toogle change 

z-index: 998; to z-index: -1.

check this jsfiddle

Upvotes: -1

Vucko
Vucko

Reputation: 20844

The z-index elements must be on the same level. In your situation, the flyout has the biggest z-index but he is the parent of flyout-toggle which has a smaller one.

Try 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 put the position:fixed styles to the parent, not its child flyout.

Check the full fiddle, you'll notice that the right side of the button can't be clicked on because flyout is over it.

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

You can use border-top: none and outline: none:

.flyout-toggle {
    position: absolute;
    transform: rotate(90deg);
    top: 50%;
    left: -60px;
    z-index: 998;
    width: 85px;
    height: 35px;
    font-size: 13px;
    background: #92C7B8;
    border: solid #fff 1px;
    border-top: none;
    outline: none;
}

fiddle

Upvotes: 2

Related Questions