CSS позиция фиксированного div все еще отображается относительно родительского элемента

Question

CSS позиция фиксированного div все еще отображается относительно родительского элемента

0

У меня есть следующая надбавка:

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

Теперь я понимаю, что даже если я переведу элемент nav вне экрана, ul-list должен оставаться на экране, так как он фиксирует положение, поэтому позиция находится относительно окна. Я неправильно понимаю позицию: исправлено?

Или как мне нужно стилизовать элемент внутри навигатора, чтобы на него не влиял nav translateX?

SnafuBernd 01 дек. 2013, в 13:21

Источник

Теги:

html

css

2 ответа

0

Не уверен, что я очень хорошо понимаю вашу проблему, но я думаю, что нужно изменить свое.np-global-menu вашего класса на.np-overlay в css-документе

Paulo Victor 01 дек. 2013, в 09:47

Ещё вопросы

Danield · Accepted Answer · 2013-12-01T10-22-00.000Z

Поскольку вы используете преобразования, элемент с фиксированным позиционированием будет относиться к элементу с преобразованием, а не к окну просмотра

Взгляните на спецификацию: модель рендеринга трансформирования

Указание значения, отличного от "none" для свойства transform, устанавливает новую локальную систему координат в элементе, к которому она применяется.

Посмотрите на этот FIDDLE в браузере webkit, чтобы увидеть это в действии

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