CODEWITHSUNDEEP
cssz-indexoverlap
Ray Stanz
Ray Stanz

Reputation: 81

CSS transformed popup cannot place on top

UPDATE: This is a webkit only issue. I tried removing translate 3d & relative positioning but both didn't help.

I have a 2 divs that overlap each other: one as a top bar and one as a side bar. The side bar content is rotated by 90 degrees.

I need to show a popup that has multiple divs inside it. The popup must be a child element of the side bar. The problem is: the popup will always stay below the top bar.

If I remove the rotate transformation, the z-index works fine but as soon as the rotation via css is enabled, the z-index is ignored completely.

http://jsfiddle.net/isaraystanz/ECFpc/

html:

<div id="topbar"></div>
<div id="sidebar" class="fileRegisterbar">
    <div class="fileRegisterTabs rotate90">
        <div class="otrPopupWrapper fileRegisterBar">
            <div id="popup"></div>                
        </div>
    </div>
</div>
<div id="file"></div>

css:

#topbar {
    background:#efefef;
    height:20px;
    position:absolute;
    top:0;
    left:0;
    right:200px;
    z-index:1;
}
#sidebar {
    border-left:solid red 1px;
    background:#ebebeb;
    width:200px;
    height:100%;
    position:absolute;
    right:0;
    bottom:0;
}
#file {
    position:absolute;
    left:0;
    right:200px;
    top:20px;
    bottom:0;
    border-top:red solid 1px;
}
#popup:hover {
    z-index: 10;
    border: solid blue 2px;
}
#popup {
    position:absolute;
    bottom:-10px;
    right: -5px;
    border: solid grey 1px;
    height:30px;
    width: 200px;
    background: white;
    z-index:10;
}    
.rotate90 {
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotate(90deg);
}

Upvotes: 0

Views: 290

Answers (2)

MildlySerious
MildlySerious

Reputation: 9170

Setting the z-index on the rotated element instead works just fine.

.rotate90 {
    transform-origin: 0 0;
    transform: rotate(90deg) translate3d(0, 0, 0);
    z-index:2;
}

Upvotes: 1

clouddreams
clouddreams

Reputation: 642

From w3schools, An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:

I think the rotation automatically puts 'popup' in the center of its parent, so it would always be below the top bar. Try setting the position of 'popup' to relative so that you can adjust right and left relative to its original position. It should solve the problem.

Upvotes: 1

Related Questions