The CSS inset property is a shorthand for top, right, bottom, and left offsets. It accepts up to four values, reducing repeated declarations when positioning an element. section 6.1
Its effect depends on the element’s positioning mode. For fixed elements, offsets use the viewport; for absolutely positioned elements, they use the closest positioned ancestor. Relative positioning uses inset values to shift an element without changing surrounding flow. section 6.2 section 6.3
Use inset values according to the layout problem:
- Use inset: 0 to place all four edges at zero; on a fixed element, this fills the viewport. section 6.1 section 6.1.1
- Use separate horizontal and vertical values, such as inset-block: 3em and inset-inline: 20%, to size a fixed modal inside the viewport. section 6.1.1
- Remember that opposing offsets can define dimensions for fixed and absolute elements, but relative positioning uses them only to shift the element. section 6.1 section 6.3
Covering the page with a modal backdrop
A fixed backdrop can cover the viewport with two declarations: .modal-backdrop { position: fixed; inset: 0; }. A modal body can then remain inside the viewport with inset-block: 3em; inset-inline: 20%;. Scrolling the page leaves both fixed elements in place. section 6.1.1
Listing 6.3 Adding modal styles
.modal-backdrop {
position: fixed; #1
inset: 0; #1
background-color: rgb(0 0 0 / 0.5); #1
}
.modal-body {
position: fixed; #2
inset-block: 3em; #2
inset-inline: 20%; #2
padding: 2em 3em;
background-color: white;
overflow: auto;
}
Inspect the modal stylesheet to connect inset declarations with the backdrop’s viewport coverage and the modal body’s constrained placement. section 6.1.1
