Bố cục trong CSS – thuộc tính position

Thuộc tính position xác định loại phương thức định vị được sử dụng cho một phần tử (tĩnh, tương đối, cố định hoặc tuyệt đối).

Thuộc tính position

Thuộc tính position xác định loại phương thức định vị được sử dụng cho phần tử. Có 4 giá trị định vị như sau:

• static
• relative
• fixed
• absolute

Các phần tử được định vị bằng cách sử dụng các thuộc tính top, bottom, left, và right. Tuy nhiên, các thuộc tính này sẽ không hoạt động trừ khi thuộc tính vị trí được đặt trước tiên. Tính tương thích của chúng cũng khác nhau tùy thuộc vào giá trị vị trí.

position: static;

Phần tử HTML được mặc định mang giá trị định vị là tĩnh (static). Phần tử được định vị static không bị thay đổi khi thêm thuộc tính top, bottom, left và right.

Một phần tử với position: static; không được đặt theo bất kỳ cách đặc biệt nào, nó luôn luôn được định vị theo dòng thông thường của trang:

Đây là CSS được sử dụng:

div.static {
    position: static;
    border: 3px solid #73AD21;
}

position: relative;

Một phần tử có position: relative; được định vị tương đối so với vị trí bình thường. Thiết lập các thuộc tính top, right, bottom, và left của một phần tử định vị tương đối sẽ điều chỉnh xa vị trí bình thường. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng cách trống nào của phần tử.

CSS được sử dụng như sau:

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

position: fixed;

Một phần tử có position: fixed; được định vị tương đối so với khung nhìn, có nghĩa là nó luôn ở trong cùng một vị trí ngay cả khi trang được cuộn. Các thuộc tính top, right, bottom, và left được sử dụng để định vị phần tử.

Một phần tử cố định không để lại một khoảng trống trong trang mà nó thường được đặt. Chú ý phần tử cố định ở góc dưới bên phải của trang. Dưới đây là CSS được sử dụng:

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    awidth: 300px;
    border: 3px solid #73AD21;
}

position: absolute;

Một phần tử có position: absolute; được định vị tương đối với vị trí gần nhất (thay vì vị trí tương đối so với khung nhìn, như cố định). Tuy nhiên, nếu một phần tử vị trí tuyệt đối không được định vị, nó sử dụng phần body tài liệu và di chuyển cùng với việc cuộn trang.

Lưu ý: một phần tử “positioned” là một trong những vị trí có bất cứ điều gì ngoại trừ phần tĩnh. Dưới đây là một ví dụ đơn giản:

CSS như sau:

div.relative {
    position: relative;
    awidth: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    awidth: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

Các phần tử chồng chéo nhau

Khi các phần tử được định vị, chúng có thể chồng chéo các phần tử khác. Thuộc tính z-index chỉ rõ thứ tự ngăn xếp của một phần tử (phần tử nào nên được đặt ở phía trước, hoặc phía sau các phần khác).

Một phần tử có thể có một trật tự ngăn xếp dương hoặc âm:

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Một phần tử có trật tự sắp xếp tốt hơn luôn được ưu tiên hiển thị phía trước.

Lưu ý: nếu hai phần tử được chồng chéo mà không có z-index được chỉ định, phần tử cuối cùng được đặt trong mã HTML sẽ được hiển thị ở trên cùng.

Định vị văn bản trong một hình ảnh

Cách định vị văn bản trên một hình ảnh:

Tất cả thuộc tính định vị trong CSS