z-index не работает с абсолютными элементами

Question

z-index не работает с абсолютными элементами

0

Когда у нас есть некоторые absolute DIV на странице и один fixed DIV в качестве ребенка одного из тех absolute DIV, у которого больший z-index чем эти absolute DIV, fixed DIV отстает от absolute DIV!

Вот так: http://jsfiddle.net/3qRaR/1/

HTML:

<div class='l1'>
    <div class='data'></div>
</div>
<div class='l1'>
    <div class='data'></div>
</div>
<div class='l1'>
    <div class='data'></div>
</div>
<div class='l1'>
    <div class='data'></div>
</div>

CSS:

.l1{
    display: block;
    width: 100px;
    height: 100px;
    background-color: yellow;
    z-index:1001;
    margin: 5px;
    position: absolute;
}
.l1:nth-child(1){
    left: 5px;
    top: 5px;
}
.l1:nth-child(2){
    left: 110px;
    top: 5px;
}
.l1:nth-child(3){
    left: 220px;
    top: 5px;
}
.l1:nth-child(4){
    left: 330px;
    top: 5px;
}
.data{
    display:none;
    position: fixed;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    z-index:2000;
    background: black;
}
.l1:first-child .data{
    display: block;
}

Зачем?
Как я могу заставить его идти к ним?

благодаря

RYN 05 март 2014, в 02:03

Источник

3

Ваша разметка имеет недостатки. Как вы можете иметь что-то fixed (относительно окна) внутри элемента, который является absolute (относительно документа)? Если вы хотите, чтобы это было впереди, переместите его за пределы родительского контейнера.
cale_b 05 март 2014, в 00:30
0

@cale_b: я собираюсь временно увеличить div от другого div, чтобы заполнить всю страницу в полноэкранном режиме
RYN 05 март 2014, в 00:33
0

Опять же, это не то, как вы должны это сделать.
Shomz 05 март 2014, в 00:33
0

Тогда используйте абсолютное позиционирование. Не зафиксировано.
cale_b 05 март 2014, в 00:34
0

@cale_b: абсолютная позиция вызывает заполнение родительского DIV, но я не хочу заполнять родительский; я хочу заполнить страницу (то есть область просмотра)!
RYN 05 март 2014, в 00:45
0

Затем измените разметку .
cale_b 05 март 2014, в 01:07

Показать ещё 4 комментария

Теги:

html

css

z-index

absolute

2 ответа

0

fixed делает divs fixed для документа, а не элементом, даже если оно является absolute. Сделайте.data divs позиции absolute, а не fixed.

http://jsfiddle.net/3qRaR/7/

.data{
    display:none;
    position: absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    z-index:2000;
    background: black;
}

Изменить: если вы хотите, чтобы fixed div закрывал весь документ, просто установите fixed div-контейнер более высоким z-index чем остальные:

http://jsfiddle.net/3qRaR/11/

.l1:nth-child(1){
    z-index: 10000;
    left: 5px;
    top: 5px;
}

Linek 04 март 2014, в 21:53

1

+1 за концепцию, но вы ошиблись . Исправлено - делает div прикрепленным к окну , а не к сайту.
cale_b 05 март 2014, в 00:34
0

Спасибо, но я не хочу заполнять родителей; я хочу заполнить страницу (то есть область просмотра)!
RYN 05 март 2014, в 00:44

Ещё вопросы

Ваша разметка имеет недостатки. Как вы можете иметь что-то fixed (относительно окна) внутри элемента, который является absolute (относительно документа)? Если вы хотите, чтобы это было впереди, переместите его за пределы родительского контейнера.
@cale_b: я собираюсь временно увеличить div от другого div, чтобы заполнить всю страницу в полноэкранном режиме
Опять же, это не то, как вы должны это сделать.
Тогда используйте абсолютное позиционирование. Не зафиксировано.
@cale_b: абсолютная позиция вызывает заполнение родительского DIV, но я не хочу заполнять родительский; я хочу заполнить страницу (то есть область просмотра)!
+1 за концепцию, но вы ошиблись . Исправлено - делает div прикрепленным к окну , а не к сайту.
Спасибо, но я не хочу заполнять родителей; я хочу заполнить страницу (то есть область просмотра)!

Duncan Walker · Accepted Answer · 2014-03-04T22-57-00.000Z

Удалите z-index из правила .li а черный.data div будет сидеть на столе желтых.li div. Я предполагаю, что это то, что вы пытаетесь сделать?

.l1{
    display: block;
    width: 100px;
    height: 100px;
    background-color: yellow;
    // Removed the z-index from here
    margin: 5px;
    position: absolute;
}

Спасибо; да, это работает, но это вызывает еще одну проблему: DIV будут отставать от других элементов на странице!
Использование абсолютного и фиксированного размещения, подобного этому, в конечном итоге создаст для вас множество трудных в управлении проблем css. В зависимости от вашей цели, вам лучше использовать относительное или статическое позиционирование (статическое значение является значением позиции по умолчанию) и резервировать фиксированное положение для большого полноэкранного наложения при расширении .data.