Skip to content

please work #11

Merged
merged 1 commit into from
Apr 16, 2019
Merged

please work #11

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions 03 - CSS/describe-z-index-and-how-stacking-context-is-formed.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Z-Index and How Stacking Context is Formed
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one. Z-index only works with elements that have positions set to something other than static. It moves elements within the stacking context.

The stacking context is a three-dimensional conceptualization of HTML elements along imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes. The stacking context is formed by the existence of any element that falls into specific scarios such as:

* Being the root element of the document `<html>`
* It `position` value is `absolute`, `fixed`, `sticky`, or `relative` and the `z-index` value is other than `auto`.
* It has an `opacity` value less than `1`.
* If any of the following properties have a value other than none:
** `transform`
** `filter`
** `perspective`
** `clip-path`
** `mask` / `mask-image` / `mask-border`