DEV Community: Uzoma Udoma Alex

Div. Positioning (Absolute)

Uzoma Udoma Alex — Thu, 22 Jun 2023 16:20:10 +0000

Absolute

This article focuses on position: absolute, however you can read my earlier articles on position: static; and position: relative; to catch up.

The positioning of a div relative to the closest containing element is what distinguishes absolute positioning from relative positioning.

The absolute position can be used with other position properties such as Top, Bottom, Left, and Right to offset the div as desired.

In contrast to position: relative;, position: absolute; totally removes the element from the document flow, and all other elements continue to move as if the div does not exist.

Since the div's movement no longer affects the positioning of other elements, it is now responsible for stacking and overlapping.

Relative is positioned relative to itself or, better still, relative to its original location. In contrast, absolute is positioned relative to the closest parent element.

It's important to keep in mind that there are two elements to be considered using the absolute positioning.

.container {
  border: 1px solid #000;
  position: relative;
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: #f00;
  position: absolute;
  top: 20px;
}
.box2 {
  width: 60px;
  height: 60px;
  background-color: #0003;
}

The above are the CSS settings for an HTML document with two child elements (box1 and box2) and a div (container) acting as their parent div.

The parent div (container) has its position property set to relative; this allows (box1) to be placed absolutely to it.

view Code

Take note of how Box1 has now shifted 20 pixels away from the top of the container div.

Recall that I said we use an absolute position, relative to the nearest parent element.

What happens when the Parent div isn't positioned relative?
Of course, since the container div is the element's closest parent div, Box1 will still move 20 pixels away from it.

When the position: relative; property associated with the container div is commented out, the distance between box1 and the container decreases. This is because box1 is now adopting the screen as its parent div.

The position of Box2 will be based on the normal document flow since its position property is not set. It is positioned behind Box 1 causing stacking or overlapping.

In order to manage the overlapping, one can use the CSS property z-index.

Div. Positioning (Relative)

Uzoma Udoma Alex — Thu, 22 Jun 2023 10:23:55 +0000

We previously established in my prior post the static attribute of the position property.

The relative attribute of the position property will be covered in detail in this article.

Relative
With the relative attribute, we may position the div using additional properties like top, left, right, and bottom, unlike the static attribute.

When the div moves, based on our positioning the other elements and divs won't occupy the space left as a result of the shift. This is because even when the div moves, it maintains the original position it would have covered.

Note: The movement of the div is with respect to the original position of the div in the document flow.

The below code shows a parent div container with three children divs (box1, box2, and box3)

View Code

Box1

Observe how Box1 has now shifted 110px away from the left after the box was given the CSS position property with attribute relative, along with the other positioning properties Top and Left.
Note: The movement to the left and away from the top wouldn't occur if the position attribute were static.

Box2

There is a sizable opening for Box2 after Box1 was moved away from the top and the left side.
However, because the position attribute for Box1 is relative, it keeps the space that the box (Box1) would have taken up in the original position.
Box2 is therefore unable to occupy the space.

Box3

Similar to Box1, Box3 has a relative position attribute and a top position property set to 10px.
Keep in mind that the bottom of Box2 reflects the location of Box3 original top, from which the box moves downward 10px.

Based on the normal document flow, the Box3 has moved from its original top position.

I hope I was able to make the Position: relative; property easier for you to understand 😊😊.

HTML Elements and Div. Positioning

Uzoma Udoma Alex — Sun, 11 Jun 2023 17:21:15 +0000

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. 🙂