Position your element with CSS inset logical property
Tags: tutorials, css, webdev, beginners
Published: 2023-03-09 05:44:09

---
title: Position your element with CSS inset logical property
published: true
description: A guide on how to position an absolute element using CSS logical properties with the prefix inset.
tags: ["tutorials", "css", "webdev", "beginners"]
cover_image: https://res.cloudinary.com/mayashavin/image/upload/v1678319167/articles/CSS/css_inset
img: articles/CSS/css_inset
canonical_url: https://mayashavin.com/articles/position-element-inset-properties
series: Efficient CSS
---

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](#table-of-contents)
- [Understanding the `position` property](#understanding-the-position-property)
- [What are logical properties?](#what-are-logical-properties)
- [Using the `inset` logical property to position an element](#using-the-inset-logical-property-to-position-an-element)
- [`inset` logical property vs. physical properties](#inset-logical-property-vs-physical-properties)
- [Browser support](#browser-support)
- [Summary](#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.

<img src="https://res.cloudinary.com/mayashavin/image/upload/f_auto,q_auto/v1676408278/articles/CSS/dimension" loading="lazy" alt="A screenshot displaying the dimensions control in horizontal and vertical writing mode" class="mx-auto"/>

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:

```css
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:

<img src="https://res.cloudinary.com/mayashavin/image/upload/f_auto,q_auto/v1676408278/articles/CSS/offset" loading="lazy" alt="A screenshot displaying the child element is at top left corner of the parent" class="mx-auto"/>

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

<img src="https://res.cloudinary.com/mayashavin/image/upload/f_auto,q_auto/v1676408278/articles/CSS/inset_start_20" loading="lazy" alt="A screenshot displaying the child element is 20% offset from the top of the parent's position" class="mx-auto"/>

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:

<img src="https://res.cloudinary.com/mayashavin/image/upload/f_auto,q_auto/v1676408278/articles/CSS/inline_start_50" loading="lazy" alt="A screenshot displaying the child element is 50% offset from the parent's top" class="mx-auto"/>

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:

<img src="https://res.cloudinary.com/mayashavin/image/upload/f_auto,q_auto/v1676408278/articles/CSS/inset_start_inline_50" loading="lazy" alt="A screenshot displaying the child element starting from the center of the parent" class="mx-auto"/>

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

```css
.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:

<img src="https://res.cloudinary.com/mayashavin/image/upload/f_auto,q_auto/v1676408278/articles/CSS/inset" loading="lazy" alt="A screenshot displaying the child element is starting from the center of the parent" class="mx-auto"/>

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:

<img src="https://res.cloudinary.com/mayashavin/image/upload/f_auto,q_auto/v1676408278/articles/CSS/bottom_right" loading="lazy" alt="A screenshot displaying the child element is at bottom right corner of the parent" class="mx-auto"/>

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

 <img src="https://res.cloudinary.com/mayashavin/image/upload/f_auto,q_auto/v1676408278/articles/CSS/horizontal_mode" loading="lazy" alt="A screenshot displaying the child element with left to right writing mode" class="mx-auto"/>

* Vertical writing mode

 <img src="https://res.cloudinary.com/mayashavin/image/upload/f_auto,q_auto/v1676408278/articles/CSS/vertical_mode" loading="lazy" alt="A screenshot displaying the child element with the vertical writing mode" class="mx-auto"/>

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

 <img src="https://res.cloudinary.com/mayashavin/image/upload/f_auto,q_auto/v1676408278/articles/CSS/inset_horizontal_mode" loading="lazy" alt="A screenshot displaying the child element with left to right writing mode positioning using inset property" class="mx-auto"/>        

* Vertical writing mode
  
 <img src="https://res.cloudinary.com/mayashavin/image/upload/f_auto,q_auto/v1676408278/articles/CSS/inset_vertical_mode" loading="lazy" alt="A screenshot displaying the child element with the vertical writing mode positioning using inset property" class="mx-auto"/>

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](https://twitter.com/MayaShavin) | [Facebook](https://www.facebook.com/mayashavin/)._

👉 _Learn about Vue with my new book [Learning Vue](https://www.oreilly.com/library/view/learning-vue/9781492098812/). The early release is available now!_

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