Thuộc tính inset

Trong CSS, thuộc tính inset kiểm soát vị trí của các phần tử được định vị (positioned elements) bằng cách chỉ định độ lệch so với vị trí mặc định của chúng. Có các thuộc tính inset vật lý (physical), logic (logical), và viết tắt (shorthand).

Các thuộc tính inset bao gồm top, left, bottom, và right — là các thuộc tính vật lý, cùng với các thuộc tính tương đương theo chiều luồng nội dung là inset-block-start, inset-block-end, inset-inline-start, inset-inline-end — là các thuộc tính logic, và các thuộc tính viết tắt inset-block, inset-inline, và inset.

Thuộc tính vật lý tham chiếu đến các cạnh vật lý cụ thể của phần tử. Thuộc tính logic sử dụng các từ khóa định hướng tương đối với trục block và trục inline. Trục block là trục xác định thứ tự xếp chồng của các phần tử trong bố cục block. Trục inline là trục vuông góc với trục block, đại diện cho chiều mà nội dung inline như văn bản chảy trong một block. Ánh xạ giữa chúng phụ thuộc vào writing-mode, direction, và text-orientation của phần tử.

Cách hiểu các thuộc tính inset phụ thuộc vào giá trị của thuộc tính position. Khi đặt position: absolute, chúng đại diện cho độ lệch so với containing block hoặc anchor element. Với position: relative, chúng đại diện cho độ lệch so với vị trí lề mặc định của hộp. Với sticky, chúng đại diện cho độ lệch so với cạnh của scroll container. Giá trị fixed tương tự absolute, ngoại trừ phần tử được định vị và kích thước theo containing block định vị cố định, thường là viewport.