CSS Position Absolute: Định vị tuyệt đối

Chúng ta có thể định vị một phần tử trong CSS là absolute, khiến phần tử đó được định vị tương đối với phần tử cha đầu tiên có định vị (trừ static). Các phần tử với phương thức định vị absolute được định vị bằng các thuộc tính CSS Positioning: left, right, top và bottom.

Ví dụ 1: Căn giữa phần tử với absolute

<!DOCTYPE html>
<html>
<head>
<style>
p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div:first-child {
    background-color: orange;
    text-align: center;
}
div:last-child {
    width: 250px;
    height: 100px;
    margin: auto;
    background-color: turquoise;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>ICC là Hội đồng Cricket Quốc tế, cơ quan quản lý Cricket được thành lập năm 1909...</p>
<div></div>
</body>
</html>

Ví dụ 2: So sánh relative, absolute, fixed

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 2px double #a43356;
    margin: 5px;
    padding: 5px;
}
#d1 {
    position: relative;
    height: 10em;
}
#d2 {
    position: absolute;
    width: 20%;
    bottom: 10px; /* tương đối với parent d1 */
}
#d3 {
    position: fixed;
    width: 30%;
    top: 10em; /* tương đối với viewport */
}
</style>
</head>
<body>
<div id="d1">
MySQL là Hệ quản trị cơ sở dữ liệu quan hệ SQL mã nguồn mở phổ biến nhất.
<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>

Giải thích quan trọng

• Relative: Phần tử định vị tương đối với vị trí bình thường của nó
• Absolute: Phần tử định vị tương đối với ancestor gần nhất có position khác static
• Fixed: Phần tử định vị tương đối với viewport (cửa sổ trình duyệt), không thay đổi khi cuộn trang

Khi sử dụng position: absolute, phần tử sẽ bị loại khỏi luồng tài liệu bình thường (normal flow), không chiếm diện tích và không ảnh hưởng đến bố cục của các phần tử khác.