Какой лучший способ наложения слоев div друг на друга в z-index?

Question

Я хочу, чтобы некоторые элементы делились друг на друга, но в противном случае действуйте как обычный элемент.Т.е. я не хочу беспокоиться о их ручном позиционировании.Возможно ли это в HTML5 / CSS3?

Например:

<div id='outerDiv'>
    <div id='inner1' style='z-index: 1'>This should be the full size of outerDiv</div>
    <div id='inner2' style='z-index: 2'>This should appear overtop of inner1</div>
</div>

Я надеюсь, что есть простой способ сделать это.у меня уже есть выложенная и идеальная страница, но я хочу взять один уже размещенный div и наложить еще один div прямо поверх него, точно такого же размера, не испортив существующий макет.Возможно ли это?

Answer 1

/*position relative as a base for non-static elements*/
#outerDiv{
    position:relative;
}

/*every direct child positioned absolute*/
#outerDiv > div {
    position:absolute;
}

в это время они будут накладываться друг на друга, с более поздним элементом поверх предыдущего.если вы хотите, чтобы предыдущий div был выше следующего, тогда вам нужно сделать его z-index явно выше, чем следующий, #outerDiv не будет растягиваться в соответствии с дочерними элементами, так как он выведен из потока.

---

, если ваш #outerDiv имеет размеры (ширину и высоту), и вы хотите растянуть на него дочерние элементы, добавьте к дочерним элементам:

//you might run into box model issues esp. if children have borders and padding
height:100%;
width:100%;

или

//this will contain paddings and borders, but i'm not sure what their side-effects are
top:0;
left:0;
right:0;
bottom:0;

Answer 2

Z-индексация в HTML5 работает так же, как и всегда. Скорее всего, вам придется указывать местоположения, но что касается самого слоя, это все автоматически, если вы указываете z-index.