HTML Elements and Div. Positioning

The CSS property called position controls the rendering of HTML elements and divs by specifying where they should appear on the screen.

The Position property has five primary attributes listed as follows:

• static
• relative
• fixed
• absolute
• sticky

It is important to note that all HTML elements and DIVs are positioned static by default, but this attribute can be changed to any of the available options listed above to suit our development goal.

Since all HTML elements and divs are positioned static by default, let's start by looking at how the static attribute affects the positioning of these elements.

• Position: static;

Since all HTML elements and Divs have their position attribute as static by default, you might not always see this property and attribute used in those elements and Divs.

Most of the time, removing the default static attribute is the reason you need to use the position property alongside other attributes other than static.

With attribute static, The element or div with only aligns according to the document flow.
They do not move across the page as we desire.

---

Here is an illustration.

Box1

In the example shown, there are two divs in the HTML document's body section. The child div with the class name box1 and the parent div with the class name container.

The position property of the child div (box1) includes the attribute static, along with additional attributes like top, bottom, and left that work with the position property to determine where an element should be placed in the document.

The child element did not respond to the top, bottom, or left properties, as you can see.

Why 😫 ?

This is simply because static position only follows the regular document flow, not our desired setting. 😎

Again, if you run the code with the position attribute commented out, the outcome would be the same because the default property would still be present.

[without Position Property]

.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  /*position: absolute;*/
  top: 50px; 
  left: 50px; 
}

(https://codepen.io/whozormah/pen/qBQdxeM)

See my next post on the relative attribute. 🙂

Comments

[Ashish Khare😎]

Can't wait to see how rest of the properties work? Adding a illustration made things clear. 😄👌🏻

[Uzoma Udoma Alex]

Thank you, Ashish. Trust that things will only get better!
Regards!

[Ashish Khare😎]

Yay

[John Owolabi Idogun]

@whozormah Welcome to the community. Nice post, by the way 🙂.

[Uzoma Udoma Alex]

Thank you so much for the warm welcome.
Looking forward to a deeper connection with you! 😎😎