CSS 转换的弹出窗口不能放在顶部答案

【问题标题】：CSS transformed popup cannot place on topCSS 转换的弹出窗口不能放在顶部
【发布时间】：2014-01-28 15:05:51
【问题描述】：

更新： 这是一个仅限 webkit 的问题。我尝试移除 translate 3d 和相对定位，但两者都没有帮助。

我有一个 2 个相互重叠的 div：一个作为顶栏，一个作为侧栏。 侧边栏内容旋转了90度。

我需要显示一个包含多个 div 的弹出窗口。 弹出窗口必须是侧栏的子元素。问题是：弹出窗口将始终停留在顶部栏下方。

如果我删除 旋转变换，z-index 工作正常，但只要 rotation via css 启用，z-index完全忽略。

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);
}

【问题讨论】：

标签： css z-index overlap

【解决方案1】：

来自 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>:

我认为旋转会自动将“弹出”置于其父级的中心，因此它始终位于顶部栏下方。尝试将“弹出”的位置设置为相对，以便您可以相对于其原始位置进行左右调整。它应该可以解决问题。

【讨论】：

【解决方案2】：

在旋转的元素上设置z-index 就可以了。

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

【讨论】：

很抱歉，我没有看到这是一个 webkit 唯一的问题，但你指出了我正确的方向 :)