mirror of https://github.com/rjbasitali/tutorials
82 lines
3.6 KiB
Markdown
82 lines
3.6 KiB
Markdown
# Positioning Elements With CSS
|
|
|
|
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/position) for `position` property.
|
|
|
|
## Theory Time - Understanding Positioning
|
|
|
|
The `position` property with value `static` is applied by default to all elements in the *Document Flow*.
|
|
|
|
`position` property has the following values that we can set to change the position of an element:
|
|
* `static`
|
|
* `absolute`
|
|
* `relative`
|
|
* `fixed`
|
|
* `sticky`
|
|
|
|
To use the *positioning properties* like `top`, `right`, `bottom` and `left`, we need to change the value of `position` property from `static` to something else.
|
|
|
|
## Working With The `fixed` Value
|
|
|
|
We can use the `position: fixed` to keep our navigation bar from scrolling out of the viewport. For example:
|
|
|
|
```css
|
|
.main-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
```
|
|
|
|
|
|
## Using The `position` To Add A Background Image
|
|
|
|
`position: fixed` is useful when you want a background image that should not be the part of the *document flow*. But you'll see that by adding this rule to the image, it overlaps other elements. We can fix that using the `z-index`.
|
|
|
|
|
|
## Understanding the `z-index`
|
|
|
|
The default value for `z-index` is `auto`, which is `0`. Adding `z-index` to elements with no `position` property applied or with `static` value, the `z-index` doesn't work. Elements with same value of `z-index` follow the order of the elements in the HTML document, that is the elements declared later will be displayed above the elements declared before them.
|
|
|
|
```css
|
|
.background {
|
|
backgound: url("");
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
z-index: -1;
|
|
}
|
|
```
|
|
|
|
|
|
## Styling And Positioning Our Badge With `absolute`
|
|
|
|
`absolute` positioned element is removed from the normal document, and is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.
|
|
|
|
|
|
## Diving Deeper Into `relative` Positioning
|
|
|
|
The element is positioned according to the normal flow of the document, and then offset `relative` to itself based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements; thus, the space given for the elemWent in the page layout is the same as if position were `static`.
|
|
|
|
|
|
## Working With `overflow` And Relative Positioning
|
|
|
|
Setting `overflow: hidden;` on parent element hides the relatively positioned element once its outside of the containing parent.
|
|
|
|
`overflow: hidden;` on `body` element by default doesn't work as it is passed on to the `html` element as a default CSS behavior, which can be overwritten by adding it to both `html` and `body` elements.
|
|
|
|
|
|
## `sticky` Positioning
|
|
|
|
`stickey` is a combination of `relative` and `fixed`. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting `top` to value other than `auto`) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.
|
|
|
|
|
|
## Understanding the Stacking Context
|
|
|
|
A stacking context is formed anywhere in the document by any element with a `position` value `absolute`, `relative`, `fixed` or `sticky`. Within a stacking context, the `z-index` values only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.
|
|
|
|
Stacking context is formed in some other scenarios as well, which can be look at on its [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
|
|
|