Learning CSS will improve your design skills and enhance the user experience on your web site — even the most basic designs can look amazing and function properly with some CSS. As your web site project gets more detailed, using the CSS put property will make your life much easier . In this mail, we ‘ll explain how you can use stead in CSS to edit the layout of your web page. We ‘ll explore different placement types and review how you can position elements like text and images to create an engage web site .

What is the CSS position property?

The CSS position property is used to specify where an element is displayed on the page. When paired with the the top, right, bottom, and left CSS properties, the put property determines the final location of the component.

The position property can take one of several values : static, proportional, fixed, absolute, and awkward. Let ’ s break down each value in detail with examples to see how each rate affects a page element .

CSS Position Values

1. static
2. relative
3. fixed
4. absolute
5. sticky

static

Static is the default option stead for HTML elements. Elements with position: static are positioned based on the normal hang of the foliate, as you would expect them to be without any CSS style. They are not affected by the top, right, bottomland, or left properties. Z-index besides does not apply to inactive elements .
In the example below, only div 2 is assigned position: static. however, you ’ ll see that its placement in the document is the like as if it did not have this property. You can delete the position: static from the CSS and the display will not change .
See the Pen CSS put : static by HubSpot ( @ hubspot ) on CodePen .
Nothing excessively exciting here. following, let ’ s see how we can change an element ’ s stead from the default .

relative

When assigned position: relative, an element follows the render flow of the page, but will be shifted relative to its initial position .
To determine the total of cancel, you set values for the top, right, bottom, and/or left properties. Surrounding elements won ’ deoxythymidine monophosphate be affected, but there will be outer space where the shift component would have been ( in inactive placement ) .
In this model, I ’ ve offset div 2 by 30 pixels down ( with the top property ) and 30 pixels to the right ( using the left property ). The reposition div does not affect the situation of surrounding elements .
See the Pen CSS position : relative by HubSpot ( @ hubspot ) on CodePen .
When using position: relative, the z-index value should be set to auto unless you want to create a modern stacking context. basically, a new stacking context means you create a newly put of layers that will be stacked based on that component .

fixed

Elements with position: fixed do not adhere to the convention render menstruate of the document. alternatively, fix elements are positioned relative to the viewport — in early words, the region of the document that is presently visible in the browser .
Fixed elements do not move when the user scrolls, and, unlike relative, they do not leave a blank outer space where the component would have been positioned. You can use the top, right, bottom, and left properties to set the pay back chemical element ‘s final situation .
here, div 2 is offset by 30 pixels crown and 30 pixels left, like in the last example. however, this time it is positioned relative to the viewport. Notice that there is no outer space where the element would have been on the foliate .
See the Pen CSS status : fixed by HubSpot ( @ hubspot ) on CodePen.

additionally, note that using the fixed respect automatically establishes a new stacking context .

absolute

With position: absolute, an component ignores the convention document flow. however, alternatively of being positioned relative to the viewport ( like with position: fixed ), it ’ randomness positioned relative to the nearest positioned ancestor ( a positioned ancestor is any element with a position respect besides static, the default option ) .
here, div 2 is placed inside a container div ( in grey ) and positioned relative to the container, since the container is the nearest ancestor element of div 2 .
See the Pen CSS position : fixed by HubSpot ( @ hubspot ) on CodePen .
If there ’ s no put ancestor, the element is positioned relative to the containing jam and moves with scroll .

sticky

Elements with position: sticky are positioned depending on the exploiter ’ south scroll. Depending on how far the drug user has scrolled down the page, a gluey component behaves like a relative element until the viewport meets a assign position. then it becomes fixed in a spot and appears to “ stick ” to the page as the drug user scrolls .
In this example, scroll down and watch as div 2 goes from behaving like a proportional component to a fixed element when it reaches the position top: 0 and “ sticks ” to the top of the viewport .
See the Pen CSS position : awkward by HubSpot ( @ hubspot ) on CodePen .
muggy elements always create a stacking context .
Keep in thinker that using the Bootstrap CSS model will provide you with these five values, a well as three extra classes for controlling the position of an element : fixed exceed, pay back bottomland, and sticky top. If you ‘re concern, you can check out the code and examples for each of these Bootstrap CSS position property classes .
now that you understand the different ways you can change the status of an element, let ‘s take a closer look at the difference between absolute and proportional position .

CSS Position: Relative vs. Absolute

When an element ‘s computed situation respect is defined as fix or absolute, it assumes the absolute CSS position. When the computed place respect is relative, it assumes the relative CSS side. In both cases, the top, right, bottom, and left properties specify the offsets from the element ‘s military position .
While relative-positioned elements remain in the flow of the text file, absolute-positioned elements are taken out of the manner of the other elements on the foliate. All early elements are positioned out as if the absolute-positioned chemical element were not there .
The example below illustrated the deviation between electrostatic, proportional, and absolute placement. In each grey box, the second paragraph element ( highlighted in blue ) is positioned differently .
See the Pen cesium position : relative volt absolute by HubSpot ( @ hubspot ) on CodePen .
In the first box, the paragraph is static and appears adenine expected. In the second box, it is positioned proportional to where it would have been in static placement, shifted 40 pixels devour and to the right. In the third box, the paragraph is positioned absolutely — in other words, it is placed relative to its parent element ( the gray box container ) and the other paragraph elements behave as if it weren ’ metric ton in the text file at all .

Applying Your Knowledge of CSS Position Property

The CSS situation property is an progress world wide web design skill that will take practice to chief. Bookmark this foliate and come back to it as you explore cesium position positioning on your web site. When you ’ re ready for more, check out our Beginner ’ s Guide to HTML & CSS For Marketers.

Editor ‘s note : This post was in the first place published in January 2021 and has been updated for comprehensiveness .