Position your element with CSS inset logical property

In this tutorial, we will learn how to position an element using the inset logical property. We will also learn how the inset logical property differs from the physical properties like top, bottom, left, and right.

Table of Contents

• Table of Contents
• Understanding the position property
• What are logical properties?
• Using the inset logical property to position an element
• inset logical property vs. physical properties
• Browser support
• Summary

Understanding the position property

The browser uses the position property to determine how to position an element in the page layout. The position property can have the following values:

• static - the browser will position the element according to the normal flow and ignore any position-related properties such as top, bottom, left, right, z-index, and the logical property with the inset prefix. static is the default value for the position property for all HTML elements.
• relative - the browser will position any element with this position value relative to its normal position, according to other additional related properties. Also, the browser will not remove the component from the normal flow. Hence the element will still take up the same amount of space in the layout.
• fixed - the browser will align the element to the viewport, making it fixed in the same position regardless of the page scrolling. The element will no longer be in the regular layout flow of the page. This position is typical for navigation components like the footer, header, navigation bar, etc.
• absolute - the browser will position the element relative to the nearest positioned ancestor element (not static) and remove it from the regular layout. This position is common for components like modal, dropdown, tooltip, etc.
• sticky - the browser will position the element based on the user's scroll position.

Among these values, relative is considered closest to static as long as there is no extra helping property like top, bottom, etc. Hence, it is the most common solution for positioning any absolute elements concerning their parent container.

To understand how inset logical properties work in this tutorial, we use the position: absolute value as our example element and relative for its parent. But first, what are logical properties?

What are logical properties?

Unlike physical-based properties like vertical (top and bottom) and horizontal (left and right), CSS introduces logical properties based on the direction of the content flow or the movement of the writing mode (left-to-right, right-to-left, or vertical). Logical properties give us the ability to control layout logically, with two following dimensions:

• Block dimension - the vertical dimension of the element in horizontal writing mode and the horizontal otherwise.
• Inline dimension - the horizontal dimension of the element in horizontal writing mode and the vertical otherwise.

For example, in the horizontal writing mode (Latin, English, etc.), the start and end of the block dimension are the top and bottom of the element, and the beginning and end of the inline dimension are the left and right of the component, respectively.

Next, let's see how to use logical properties to position an element.

Using the inset logical property to position an element

We can use the inset logical property to define physical offset for the element's block and inline dimensions with the following syntax:

inset: <block-start> <inline-start> <block-end> <inline-end>;

The inset logical property is a shorthand for the following logical properties: inset-block, inset-inline, inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end.

For example, when setting position: relative and position: absolute to the parent and child element, respectively, the child element's starting position will be the same as the parent element, as seen in the below screenshot:

Then, we can set inset-block-start to 20px to have the child element positioned 20px below the parent element:

Alternatively, we can set a percentage as the value for inset-block-start. The browser will then calculate the position offset according to the parent's height:

Similarly, we can also use inset-inline-start to position the element horizontally, such as 50% to set the element at the center of the parent element:

We can also use inset-block and inset-inline to set the offset for both block and inline dimensions, respectively:

.child {
    position: absolute;
    inset-inline: 50% -100%;
    inset-block: 50% -100%;
}

The above code will expand the child's width to 150% of the parent's width and its height to 150% of the parent's height. Then, the browser will position the child element starting from the center of the parent element in both dimensions, as shown in the screenshot below:

And if we set inset-inline-end and inset-block-end to 0%, the child element will be positioned at the bottom-right corner of the parent element:

That's it. We have learned how to position an element using the inset logical property. How does it differ from using physical properties like top, bottom, left, and right? Let's find out in the next section.

inset logical property vs. physical properties

While the inset- logical properties accept the same value format as the physical properties, the browser will calculate the position offset differently, especially in writing mode that is not horizontal (left-to-right). For example, in the vertical writing mode (Chinese, Japanese, etc.) or horizontal mode, when using physical properties such as top and left, the browser continuously calculates the offsets from the top-left corner of the parent element as follows:

• Horizontal writing mode

• Vertical writing mode

But when using the inset logical properties, the browser will calculate the offsets from the start of the block dimension and the start of the inline dimension, resulting in different position offsets, as follows:

• Horizontal writing mode

• Vertical writing mode

That said, while it is not straightforward to understand like other physical properties, the inset logical properties are more flexible to use, especially when we want to support positioning in different typography. All we need is a bit of learning and practice to get used to it.

Browser support

The inset logical properties are supported in all major browsers so that you can use them in your projects immediately.

Summary

At this point, you should have a good understanding of the inset logical properties and how to use them to position an element. What's next? Try to replace any physical properties with the inset logical properties in your projects, and see how it works. Or you can explore other logical properties such as margin and padding and see how they work. If you have any questions, feel free to leave a comment below.

👉 If you'd like to catch up with me sometimes, follow me on Twitter | Facebook.

👉 Learn about Vue with my new book Learning Vue. The early release is available now!

Like this post or find it helpful? Share it 👇🏼 😉

Comments

[MD. Shaheduzzaman Shahed]

Hey there. The article was an amazing one to explore some good css positioning in a different way. I learned a new thing.

But here's a small confusion on this particular block of code that I could not get proper idea about.
.child {
position: absolute;
inset-inline: 50% -100%;
inset-block: 50% -100%;
}

The article shows, this will make the child's width and height 150% of the parent, but why it behaves like so, any how this can be used, I am still not getting it. Could you please explain it a bit?

Again, thanks for the detailed explanation inset logical positioning.

[Maya Shavin 🌷☕️🏡]

Hey,

Since there is no fixed width defined for the child, when you set inset-inline: 50% -100%, what it does is to do two things:

1. Move the horizontal starting point to 50% of the parent’s width, meaning here right at the middle of the parent from the left.
2. Move the horizontal ending point for the child to a distance of 100% * height of parent away from the right (note the minus sign here).

The original inline ending point is aligned to the parent’s inline ending point (the right), so now it looks like the width of the child become the distance from the middle to the parent’s right (50% parent width) + the distance from the parent’s right to the child’s right (100% parent width) = 150% width.

Does it answer your question? ☺️

[MD. Shaheduzzaman Shahed]

Yes, I was confused with that minus part (-100%) but now it's all good. Thanks for the answer.
Have a good one ! 😊

[fruntend]

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍