We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Обычно HTML страницы можно считать двухмерными, потому что текст, картинки и другие элементы расположены на странице без перекрытия. Существует единый нормальный поток отрисовки (rendering flow) и элементы избегают пространства, занятого другими.z-index атрибут позволяет регулировать порядок наложения объектов друг на друга в процессе отрисовки контента (rendering content).

В CSS 2.1, позиция каждого блока была в трех измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и распологались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга. 

(from CSS 2.1 Section 9.9.1 - Layered presentation)

It means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS z-index property.

Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or even unpredictable. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

This article will try to explain those rules, with some simplification and several examples.

  1. Stacking without z-index : Default stacking rules
  2. Stacking and float : How floating elements are handled
  3. Adding z-index : Using z-index to change default stacking
  4. The stacking context : Notes on the stacking context
  5. Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
  6. Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
  7. Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level

Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.

Original Document Information

 

Метки документа и участники

Внесли вклад в эту страницу: DartWelder, elenatafeenko, Jeremie
Обновлялась последний раз: DartWelder,