Home  >  Article  >  Web Front-end  >  Introduction to z-index property in CSS

Introduction to z-index property in CSS

一个新手
一个新手Original
2017-10-20 09:27:571934browse

Cascading context: a three-dimensional concept, indicating the position of the element on the Z axis

The cascade can be nested and combined into a hierarchical context
Each cascading context is independent of its sibling elements and can be cascaded or rendered. When, only descendant elements are considered
Each stack is self-contained

Stacking order


1 background~border
2 负z-index
3 block盒子
4 float浮动盒子
5 inline/inline-block盒子
6 z-index:auto/z-index:0
7 正z-index

Features

Support Negative value
Support CSS3 Animation
Need to be used together with positioning elements in css2.1
If positioning elements z-index are nested: the principle of coming last, Whichever is bigger will go first
If nesting occurs: ancestor priority principle, the premise is that z-index is a numerical value instead of auto, auto does not create a cascading context

Use

Default positioning element z-index: auto; /z-index: 0
z-index is not The positioning element of auto will create a cascading context
z-index The comparison of the cascading order stops at the parent cascading context
Avoid z-index Nested levels Relationship confusion
Avoid z-index confusion, the style problem of a mountain rising in a flash
Negative values ​​can be used to hide

The above is the detailed content of Introduction to z-index property in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn