From b802ec5166a8c1a1d8a01ffa6dd28e8df30e5269 Mon Sep 17 00:00:00 2001 From: Lily Pashapour Date: Mon, 15 Apr 2019 23:30:18 -0400 Subject: [PATCH] please work --- ...e-z-index-and-how-stacking-context-is-formed.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 03 - CSS/describe-z-index-and-how-stacking-context-is-formed.md 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 new file mode 100644 index 0000000..842e8f7 --- /dev/null +++ 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 `` +* 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` \ No newline at end of file