Question

我有以下标记：

<nav class="np-global-menu">
        <div class="np-overlay"></div>
        <ul>
            <li><a href="#">Create</a></li>
            <li><a href="#">See</a></li>
            <li><a href="#">Start</a></li>
        </ul>
    </nav>

以下的CSS：

.np-global-menu {
position: fixed;
top: 50px;
bottom: 0;
left: 0;
width: 100%;
z-index: +2;
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
transform: translateX(-250px);
-webkit-transition: -webkit-transform 3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 3s;
}


.np-global-menu ul {
position: fixed;
left:0px;
width: 250px;
color: #7f8c8d;
background: white;
height: 100%;
z-index:+2;
 }

我现在的理解是，即使我将导航元素翻译到屏幕之外，ul-list仍应保留在屏幕上，因为它是位置固定，因此位置相对于窗口屏幕。我是否误解了立场：固定？

或者我如何设置导航中的元素以使其不受nav translateX的影响？

Answer 1

因为您正在使用变换，具有固定定位的元素将变为相对于具有变换的元素 - 而不是视口

查看规范：The Transform Rendering Model

为'transform'属性指定'none'以外的值在元素处建立一个新的局部坐标系适用于。

在webkit浏览器中查看此FIDDLE以查看此操作

<div class="wpr">
    <div class="fixed"></div>
</div>

.wpr
{
    width: 200px;
    height:1000px;
    background: pink;
    position:relative;
    margin: 0 200px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.fixed
{
    width: 200px;
    height:200px;
    margin: 50px;
    position: fixed;    
    top:0;
    left:0;
    background: aqua;
}

Answer 2

我不确定我是否理解你的问题，但我认为需要在css文档中将你的班级.np-global-menu更改为.np-overlay

CSS位置固定div仍然相对于父元素显示

2 个答案: