Merge pull request #11 from bpd01001/feature/describe-z-index-and-how…

…-stacking-context-is-formed please work
bpd01001 · Apr 16, 2019 · e989d24 · e989d24
2 parents eeca3dc + b802ec5
commit e989d24
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/03 - CSS/describe-z-index-and-how-stacking-context-is-formed.md b/03 - CSS/describe-z-index-and-how-stacking-context-is-formed.md
@@ -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`