3.6 KiB
Positioning Elements With CSS
MDN reference 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:
staticabsoluterelativefixedsticky
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:
.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.
.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.