z-index с фиксированными элементами

Я пытаюсь получить элементы на дисплее страницы должным образом. макет выглядит следующим образом.z-index с фиксированными элементами

<div id='middle' style='position: fixed; z-index: 50;'></div> 
<div id='bottom' style='position: fixed; z-index: 0;'> 
<div id='top' style='position: fixed; z-index: 100;'></div> 
</div>

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

Вложение важно для верхнего div, чтобы получить доступ к нижнему div в качестве родительского объекта, а средний div - независимо от двух других.

Я использую встроенный CSS, чтобы держать этот вопрос ограниченных и прямые и сэкономить хлопоты организации КАСА страницы

источник

2013-03-01 David Shears

Затем вы должны использовать три независимых дивы. В момент '# bottom' находится под' # middle'. '# top' является дочерним элементом' # bottom', а это означает, что он также находится под '# middle' (независимо от его' z-index', потому что это относительно следующего расположенного родителя. –

, хотя theyre использует фиксированный Позиционирование? Я думал, что фиксированное расширение абсолютного и, следовательно, относительное позиционирование не повлияет на эту ситуацию. –

Это может прояснить: http://stackoverflow.com/questions/1384604/css-positionfixed-inside-of-position-fixed – bmavity

Короче говоря, не изменяя разметку, вы не можете делать то, что вы после этого. Z-индекс «средний» и «нижний» вступает в силу, но «верх» никогда не появится поверх «среднего». Это потому, что «средний» и «нижний» - братья и сестры - «верх», как дочерний элемент, не могут превзойти z-индекс его родителя.

источник

2013-03-01 19:10:30 chipcullen

Я получаю его сейчас. спасибо, я пойму обходное решение. Я думал, что, возможно, быстрое решение, что мой недостаток опыта в html, возможно, упустил –

. Я не знаю, как связаны ваши руки с точки зрения разметки, но супер-kludgy работа вокруг будет манипулировать DOM с JS. Однако я бы постарался избежать этого. – chipcullen

Попробуйте с этим:

<div id='middle' style='position: fixed; z-index: 50;width: 100px; height: 100px; background: red; top: 100px;'></div> 

    <div id='bottom' style='position: fixed; z-index: 0; width: 100px; height: 100px; background: blue; bottom: 0px;'> 
     <div id='top' style='position: fixed; z-index: 100; width: 100px; height: 100px; background: green; top: 0px;'></div> 
    </div>

источник

2013-03-01 19:11:27

это дает тот же результат, что и раньше, добавление цветов просто визуально показывает мою проблему. спасибо, хотя –

Уверен? Мой результат - верхний, средний, нижний, не средний, верхний, нижний –

yah, что ваше отображение - это верхнее среднее нижнее по отношению к оси y. Я искал реорганизацию объектов вдоль оси z. больше похоже на наложение, чем на позиционирование. спасибо за помощь, хотя –

z-index с фиксированными элементами

ответ

Смежные вопросы