diff --git a/content/blog/css-fundamentals/align-center.svg b/content/blog/css-fundamentals/align-center.svg index 3d204636..d2526fb7 100644 --- a/content/blog/css-fundamentals/align-center.svg +++ b/content/blog/css-fundamentals/align-center.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/align-end.svg b/content/blog/css-fundamentals/align-end.svg index 433445df..c1067ddd 100644 --- a/content/blog/css-fundamentals/align-end.svg +++ b/content/blog/css-fundamentals/align-end.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/align-start.svg b/content/blog/css-fundamentals/align-start.svg index 744b9d00..5def7555 100644 --- a/content/blog/css-fundamentals/align-start.svg +++ b/content/blog/css-fundamentals/align-start.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/center-center.svg b/content/blog/css-fundamentals/center-center.svg index 0e6daea0..0e101296 100644 --- a/content/blog/css-fundamentals/center-center.svg +++ b/content/blog/css-fundamentals/center-center.svg @@ -1,22 +1,22 @@ - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/center-end.svg b/content/blog/css-fundamentals/center-end.svg index 3bffa1c6..6f3b545e 100644 --- a/content/blog/css-fundamentals/center-end.svg +++ b/content/blog/css-fundamentals/center-end.svg @@ -1,44 +1,44 @@ - - - - - - + + + + + + - - - - + + + + - - - - - - - + + + + + + + - - - - + + + + - - - - + + + + - - + + - - + + - - + + - - + + diff --git a/content/blog/css-fundamentals/css_box_model.svg b/content/blog/css-fundamentals/css_box_model.svg deleted file mode 100644 index 0cb576ee..00000000 --- a/content/blog/css-fundamentals/css_box_model.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/content/blog/css-fundamentals/end-end.svg b/content/blog/css-fundamentals/end-end.svg index cd037a91..c5def2d0 100644 --- a/content/blog/css-fundamentals/end-end.svg +++ b/content/blog/css-fundamentals/end-end.svg @@ -1,44 +1,44 @@ - - - - - - + + + + + + - - - - + + + + - - - - - - - + + + + + + + - - - - + + + + - - - - + + + + - - + + - - + + - - + + - - + + diff --git a/content/blog/css-fundamentals/end-start.svg b/content/blog/css-fundamentals/end-start.svg index c6a19b45..a6450dfd 100644 --- a/content/blog/css-fundamentals/end-start.svg +++ b/content/blog/css-fundamentals/end-start.svg @@ -1,44 +1,44 @@ - - - - - - - - - + + + + + + + + + - - - - + + + + - - - - - - - + + + + + + + - - - - + + + + - + - - + + - - + + - - + + - - + + diff --git a/content/blog/css-fundamentals/flex-column.svg b/content/blog/css-fundamentals/flex-column.svg index c0274570..99c9ae28 100644 --- a/content/blog/css-fundamentals/flex-column.svg +++ b/content/blog/css-fundamentals/flex-column.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/flex-row.svg b/content/blog/css-fundamentals/flex-row.svg index ec3bb802..f81dc311 100644 --- a/content/blog/css-fundamentals/flex-row.svg +++ b/content/blog/css-fundamentals/flex-row.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/grid-columns.svg b/content/blog/css-fundamentals/grid-columns.svg index 90bfa599..6ebacb07 100644 --- a/content/blog/css-fundamentals/grid-columns.svg +++ b/content/blog/css-fundamentals/grid-columns.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/grid-rows.svg b/content/blog/css-fundamentals/grid-rows.svg index 8efdaa17..327e4842 100644 --- a/content/blog/css-fundamentals/grid-rows.svg +++ b/content/blog/css-fundamentals/grid-rows.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/headings.svg b/content/blog/css-fundamentals/headings.svg deleted file mode 100644 index 2f11a0ad..00000000 --- a/content/blog/css-fundamentals/headings.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/content/blog/css-fundamentals/index.md b/content/blog/css-fundamentals/index.md index 2624147d..ceb82c57 100644 --- a/content/blog/css-fundamentals/index.md +++ b/content/blog/css-fundamentals/index.md @@ -1,7 +1,7 @@ --- { title: "CSS Fundamentals", - description: "A beginners course for CSS box model, HTML defaults, flex box layout, grid box layout, responsive design, selectors, units, and variables.", + description: "A beginners course for CSS box model, HTML defaults, flexbox layout, gridbox layout, responsive design, selectors, units, and variables.", published: "2022-01-18T20:08:26.988Z", authors: ["ljtech"], tags: ["css", "design"], @@ -135,7 +135,7 @@ These placement methods are used to distribute both flex and gridbox items: - [`place-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content) - shorthand property for [`align-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) and [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) - [`place-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items) - shorthand property for [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) and [`justify-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) -- [`place-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) - shorthand property for [`align-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) and [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) +- [`place-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) - shorthand property for [`align-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) and [`justify-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) > 🤓 These are some godly CSS properties that everyone should know about @@ -283,28 +283,55 @@ Here is a list of CSS properties used to control gridbox properties: ## Positioning -The CSS property `position` determines an elements flow inside a document. You can add the CSS properties `top`, `right`, `bottom`, `left` to create an offset on a positioned element or control its order using `z-index`, allowing for elements to overlap one another. +The CSS property `position` determines an elements flow inside a document. + +The CSS properties `top`, `bottom`, `left`, `right` are used on positioned elements to control an offset while `z-index` controls the elements order (bringing it to the front or back). ![positioning.svg](./positioning.svg) +```css +.root { + position: relative; + width: 768px; + height: 272px; +} + +.container { + position: absolute; + left: 224px; + top: 100px; + width: 320px; + height: 145px; + z-index: 90; +} + +.item { + position: absolute; + bottom: 50px; + right: 90px; + width: 213px; + height: 65px; + z-index: 100; +} +``` + + + There are five types of element positions: - **Absolute** - The element is removed from document flow and positioned relative to the nearest `position: relative` parent - Can be offset relative to the parent container and ordered - **Fixed** - The element is removed from document flow and positioned relative to the initial container - Can be offset relative to the initial container and ordered - - **Relative** - The element flows normally and provides relative positioning for children elements - Can be offset relative to itself and ordered - - **Static** - The default position - Unaffected by offset and order - - **Sticky** - The element flows normally and "sticks" to the nearest container - A mixture between relative and fixed positions depending on the scroll mechanism - Can be offset relative to the parent container and ordered -> ⚡ Live Code Example: **COMING SOON!** +> ⚡ Live Code Example: [Positioning](https://codesandbox.io/s/positioning-gzzv3?file=/styles.css) --- @@ -320,7 +347,7 @@ For example, YouTube uses a flexbox to space out their headers children elements ![youtube.png](./youtube.png) -> 🤓 Mastering the flexbox will take you very far in CSS +> 🤓 Mastering the flexbox will take you very far in CSS as it is used everywhere #### Gridbox: diff --git a/content/blog/css-fundamentals/justify-around.svg b/content/blog/css-fundamentals/justify-around.svg index 6c0e6df5..665fd95c 100644 --- a/content/blog/css-fundamentals/justify-around.svg +++ b/content/blog/css-fundamentals/justify-around.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/justify-between.svg b/content/blog/css-fundamentals/justify-between.svg index 903517fd..e5cd731a 100644 --- a/content/blog/css-fundamentals/justify-between.svg +++ b/content/blog/css-fundamentals/justify-between.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/justify-center.svg b/content/blog/css-fundamentals/justify-center.svg index ec3bb802..f81dc311 100644 --- a/content/blog/css-fundamentals/justify-center.svg +++ b/content/blog/css-fundamentals/justify-center.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/justify-end.svg b/content/blog/css-fundamentals/justify-end.svg index 7c8e0a9e..da3aa832 100644 --- a/content/blog/css-fundamentals/justify-end.svg +++ b/content/blog/css-fundamentals/justify-end.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/justify-evenly.svg b/content/blog/css-fundamentals/justify-evenly.svg index 1f01c9b7..34eea689 100644 --- a/content/blog/css-fundamentals/justify-evenly.svg +++ b/content/blog/css-fundamentals/justify-evenly.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/justify-start.svg b/content/blog/css-fundamentals/justify-start.svg index ca487ea7..17fc1fe7 100644 --- a/content/blog/css-fundamentals/justify-start.svg +++ b/content/blog/css-fundamentals/justify-start.svg @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/positioning.svg b/content/blog/css-fundamentals/positioning.svg index 2d8ae18b..86472b17 100644 --- a/content/blog/css-fundamentals/positioning.svg +++ b/content/blog/css-fundamentals/positioning.svg @@ -1,15 +1,15 @@ - - + + - - + + - + @@ -17,7 +17,7 @@ - + - + diff --git a/content/blog/css-fundamentals/start-center.svg b/content/blog/css-fundamentals/start-center.svg index 08061fdf..3897c5cf 100644 --- a/content/blog/css-fundamentals/start-center.svg +++ b/content/blog/css-fundamentals/start-center.svg @@ -1,22 +1,22 @@ - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/content/blog/css-fundamentals/start-start.svg b/content/blog/css-fundamentals/start-start.svg index 93e7e38c..5ae8a5a3 100644 --- a/content/blog/css-fundamentals/start-start.svg +++ b/content/blog/css-fundamentals/start-start.svg @@ -1,44 +1,44 @@ - - - - - - - - - + + + + + + + + + - - - - + + + + - - - - - - - + + + + + + + - - - - + + + + - + - - + + - - + + - - + + - - + +