From f48b464737742748440ede2d9402d97c324637a2 Mon Sep 17 00:00:00 2001 From: jessicarush Date: Wed, 8 Mar 2023 13:21:05 -0800 Subject: [PATCH] Initial commit --- css_isolation/base.css | 88 ++++++++++++++++++++++++++++++++++++++++ css_isolation/index.html | 55 +++++++++++++++++++++++++ 2 files changed, 143 insertions(+) create mode 100644 css_isolation/base.css create mode 100644 css_isolation/index.html diff --git a/css_isolation/base.css b/css_isolation/base.css new file mode 100644 index 0000000..da834a1 --- /dev/null +++ b/css_isolation/base.css @@ -0,0 +1,88 @@ +@charset "UTF-8"; + +/* VARIABLES -------------------------------------------------------------- */ + +:root { + --heading-font: 'Open Sans', sans-serif; + --main-font: 'Open Sans', sans-serif; + --minor-font: 'Open Sans', sans-serif; + --heading-color: rgba(0,0,50,.9); + --main-color: rgba(70,70,90,.9); + --minor-color: rgb(190,190,200); + --emphasis-color: rgb(27,211,165); +} + +/* DEFAULTS --------------------------------------------------------------- */ + +html { + color: var(--main-color); + font-family: var(--main-font); + font-size: 16px; + font-weight: 400; +} + +/* TYPOGRAPHY ------------------------------------------------------------- */ + +.primary-heading { + color: var(--heading-color); + font-family: var(--heading-font); + font-size: 2rem; + font-weight: 400; +} + +.highlight-text { + color: var(--emphasis-color); +} + +/* LINKS & BUTTONS -------------------------------------------------------- */ + +/* LAYOUT ----------------------------------------------------------------- */ + +.content { + border: solid 1px pink; + margin: 25px 0 50px 0; +} + +.another { + width: 100px; + height: 100px; + background: tomato; + position: relative; + left: 20px; + top: 20px; + z-index: 2; +} +/* COMPONENTS ------------------------------------------------------------- */ + +.thing { + position: relative; +} + +.thing.isolated { + isolation: isolate; +} + +.thing__one { + width: 100px; + height: 100px; + background: orange; + position: absolute; + left: 0; + top: 0; + z-index: 1; +} + +.thing__two { + width: 100px; + height: 100px; + background: blueviolet; + position: absolute; + left: 40px; + top: 40px; + z-index: 3; +} +/* COSMETIC --------------------------------------------------------------- */ + +/* UTILITY ---------------------------------------------------------------- */ + +/* STATE ------------------------------------------------------------------ */ diff --git a/css_isolation/index.html b/css_isolation/index.html new file mode 100644 index 0000000..08bbf0a --- /dev/null +++ b/css_isolation/index.html @@ -0,0 +1,55 @@ + + + + + + Site | Page + + + + + + +
+

CSS isolation property

+ +
+ +
+

The isolation property defines whether an element must create a new stacking content.

+

The isolation property is most helpful when used with:

+ + +

The problem: image we have the following component: a wrapper that doesn't set a z-index but has 2 elements inside that do have a z-index. This result of this situation may be confusing for some people (to me, it makes sense). If the component has a sibling with an in-between z-index, it'll get "interleaved" between the two elements inside the wrapper: +

+ +
+
+
+
+
+
+
+ +

Adding isolation: isolate; to the wrapper:

+ +
+
+
+
+
+
+
+ + +
+ + + + +