The inset property is a shorthand for top, right, bottom, and left positioning. Here's how to use it.
Basic Syntax#
1/* Single value - all sides */
2.element {
3 position: absolute;
4 inset: 0;
5 /* Equivalent to: top: 0; right: 0; bottom: 0; left: 0; */
6}
7
8/* Two values - vertical | horizontal */
9.element {
10 position: absolute;
11 inset: 10px 20px;
12 /* top: 10px; right: 20px; bottom: 10px; left: 20px; */
13}
14
15/* Three values - top | horizontal | bottom */
16.element {
17 position: absolute;
18 inset: 10px 20px 30px;
19 /* top: 10px; right: 20px; bottom: 30px; left: 20px; */
20}
21
22/* Four values - top | right | bottom | left */
23.element {
24 position: absolute;
25 inset: 10px 20px 30px 40px;
26 /* top: 10px; right: 20px; bottom: 30px; left: 40px; */
27}Full-Size Overlays#
1/* Cover entire parent */
2.overlay {
3 position: absolute;
4 inset: 0;
5 background: rgba(0, 0, 0, 0.5);
6}
7
8/* Before: verbose syntax */
9.overlay-old {
10 position: absolute;
11 top: 0;
12 right: 0;
13 bottom: 0;
14 left: 0;
15}
16
17/* Modal backdrop */
18.modal-backdrop {
19 position: fixed;
20 inset: 0;
21 background: rgba(0, 0, 0, 0.5);
22 display: flex;
23 align-items: center;
24 justify-content: center;
25 z-index: 1000;
26}
27
28/* Full-screen element */
29.fullscreen {
30 position: fixed;
31 inset: 0;
32}Offset Positioning#
1/* Equal offset from all edges */
2.centered-panel {
3 position: absolute;
4 inset: 20px;
5 background: white;
6 border-radius: 8px;
7}
8
9/* Different horizontal/vertical offsets */
10.side-panel {
11 position: fixed;
12 inset: 80px 20px 20px 20px; /* Account for header */
13}
14
15/* Inset from specific sides */
16.bottom-sheet {
17 position: fixed;
18 inset: auto 0 0 0;
19 /* Only bottom: 0, left: 0, right: 0 */
20 height: 300px;
21}
22
23.side-drawer {
24 position: fixed;
25 inset: 0 auto 0 0;
26 /* top: 0, bottom: 0, left: 0 */
27 width: 280px;
28}Modal Layouts#
1/* Centered modal */
2.modal {
3 position: fixed;
4 inset: 0;
5 display: flex;
6 align-items: center;
7 justify-content: center;
8 padding: 20px;
9}
10
11.modal-content {
12 background: white;
13 border-radius: 8px;
14 max-width: 500px;
15 width: 100%;
16 max-height: 90vh;
17 overflow: auto;
18}
19
20/* Full-height sidebar modal */
21.sidebar-modal {
22 position: fixed;
23 inset: 0 0 0 auto;
24 width: 400px;
25 background: white;
26 box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
27}
28
29/* Bottom modal */
30.bottom-modal {
31 position: fixed;
32 inset: auto 0 0 0;
33 background: white;
34 border-radius: 16px 16px 0 0;
35 max-height: 80vh;
36}Responsive Patterns#
1/* Full-width on mobile, inset on desktop */
2.responsive-panel {
3 position: fixed;
4 inset: 0;
5}
6
7@media (min-width: 768px) {
8 .responsive-panel {
9 inset: 20px;
10 border-radius: 8px;
11 }
12}
13
14/* Sidebar - different offsets by screen */
15.sidebar {
16 position: fixed;
17 inset: 0 auto 0 0;
18 width: 100%;
19}
20
21@media (min-width: 768px) {
22 .sidebar {
23 width: 300px;
24 }
25}
26
27@media (min-width: 1024px) {
28 .sidebar {
29 inset: 20px auto 20px 20px;
30 border-radius: 8px;
31 }
32}Absolute Positioning#
1/* Image overlay text */
2.card {
3 position: relative;
4}
5
6.card-overlay {
7 position: absolute;
8 inset: 0;
9 background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
10 display: flex;
11 align-items: flex-end;
12 padding: 1rem;
13}
14
15/* Badge positioning */
16.badge-container {
17 position: relative;
18}
19
20.badge {
21 position: absolute;
22 inset: -8px -8px auto auto;
23 /* top: -8px, right: -8px */
24 width: 24px;
25 height: 24px;
26 background: red;
27 border-radius: 50%;
28}
29
30/* Stretched link */
31.card-link {
32 position: absolute;
33 inset: 0;
34 z-index: 1;
35}Sticky Headers/Footers#
1/* Sticky header with inset */
2.sticky-header {
3 position: sticky;
4 inset: 0 0 auto 0;
5 /* top: 0 */
6 background: white;
7 z-index: 100;
8}
9
10/* Sticky footer */
11.sticky-footer {
12 position: sticky;
13 inset: auto 0 0 0;
14 /* bottom: 0 */
15 background: white;
16}
17
18/* Sticky sidebar */
19.sticky-sidebar {
20 position: sticky;
21 inset: 80px auto auto 0;
22 /* top: 80px to account for header */
23}Logical Properties#
1/* Logical inset properties */
2.element {
3 position: absolute;
4
5 /* Block axis (vertical in horizontal writing mode) */
6 inset-block: 10px 20px;
7 /* inset-block-start: 10px; inset-block-end: 20px; */
8
9 /* Inline axis (horizontal in horizontal writing mode) */
10 inset-inline: 10px 20px;
11 /* inset-inline-start: 10px; inset-inline-end: 20px; */
12}
13
14/* Single values */
15.rtl-aware {
16 position: absolute;
17 inset-block-start: 0; /* top in LTR */
18 inset-inline-start: 0; /* left in LTR, right in RTL */
19}
20
21/* Full coverage with logical properties */
22.overlay-logical {
23 position: absolute;
24 inset-block: 0;
25 inset-inline: 0;
26}Animations#
1/* Slide-in drawer */
2.drawer {
3 position: fixed;
4 inset: 0 auto 0 0;
5 width: 300px;
6 transform: translateX(-100%);
7 transition: transform 0.3s ease;
8}
9
10.drawer.open {
11 transform: translateX(0);
12}
13
14/* Expanding overlay */
15.expanding-overlay {
16 position: fixed;
17 inset: 50% 50% 50% 50%;
18 opacity: 0;
19 transition: all 0.3s ease;
20}
21
22.expanding-overlay.active {
23 inset: 0;
24 opacity: 1;
25}
26
27/* Notification slide */
28.notification {
29 position: fixed;
30 inset: auto 20px 20px auto;
31 transform: translateY(100%);
32 transition: transform 0.3s ease;
33}
34
35.notification.show {
36 transform: translateY(0);
37}With CSS Custom Properties#
1/* Dynamic inset */
2.dynamic-panel {
3 position: absolute;
4 inset: var(--panel-inset, 0);
5}
6
7.panel-small {
8 --panel-inset: 40px;
9}
10
11.panel-large {
12 --panel-inset: 20px;
13}
14
15/* Responsive with custom properties */
16:root {
17 --header-height: 60px;
18 --sidebar-width: 250px;
19}
20
21.main-content {
22 position: fixed;
23 inset: var(--header-height) 0 0 var(--sidebar-width);
24}
25
26@media (max-width: 768px) {
27 :root {
28 --sidebar-width: 0;
29 }
30}Common Patterns#
1/* Tooltip positioning */
2.tooltip {
3 position: absolute;
4 inset: auto auto 100% 50%;
5 transform: translateX(-50%);
6 margin-bottom: 8px;
7}
8
9/* Dropdown menu */
10.dropdown-menu {
11 position: absolute;
12 inset: 100% auto auto 0;
13 margin-top: 4px;
14}
15
16/* Right-aligned dropdown */
17.dropdown-menu.right {
18 inset: 100% 0 auto auto;
19}
20
21/* Full-bleed section */
22.full-bleed {
23 position: relative;
24 inset: 0 calc(-50vw + 50%) 0 calc(-50vw + 50%);
25 width: 100vw;
26}Best Practices#
Usage:
✓ Use for full-coverage positioning
✓ Replaces top/right/bottom/left
✓ Use auto for undefined sides
✓ Consider logical properties for RTL
Readability:
✓ Use single value for equal insets
✓ Comment complex inset values
✓ Use CSS variables for reusability
✓ Be consistent in your codebase
Performance:
✓ Prefer inset over individual properties
✓ Use transform for animations
✓ Avoid layout thrashing
✓ Test on various screen sizes
Avoid:
✗ Mixing inset with individual properties
✗ Confusing value order
✗ Forgetting position property
✗ Over-complicating with auto
Conclusion#
The inset property simplifies positioning by combining top, right, bottom, and left into a single declaration. Use it for overlays, modals, drawers, and any absolute/fixed positioning. Consider logical properties (inset-block, inset-inline) for internationalized layouts.