Định vị tuyệt đối

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 57 trên 76.

Trong CSS, định vị tuyệt đối cho phép bạn đặt một phần tử chính xác tại vị trí mong muốn bên trong vùng chứa.

Khi bạn đặt position: absolute;, phần tử sẽ bị loại khỏi bố cục thông thường, vì vậy các phần tử khác hoạt động như thể nó không tồn tại. Phần tử tự định vị dựa trên phần tử tổ tiên gần nhất có thuộc tính position được thiết lập (không phải static). Nếu không có phần tử nào như vậy, nó sẽ tự định vị so với trang.

Đây là cú pháp cơ bản để dùng định vị tuyệt đối:

.parent {
    position: relative; /* Đặt phần tử cha làm phần tử tổ tiên có định vị */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: Bộ chọn CSS nhắm đến phần tử cha. Đặt position: relative; cho phép các phần tử con được định vị tuyệt đối.

.child: Bộ chọn CSS nhắm đến phần tử bạn muốn định vị tuyệt đối.

position: absolute;: Khai báo này đặt chế độ định vị của phần tử thành tuyệt đối, đưa phần tử ra khỏi luồng thông thường.

top, right, bottom, left: Các thuộc tính này xác định vị trí của phần tử so với phần tử tổ tiên gần nhất có định vị. Bạn có thể dùng giá trị dương hoặc âm, tính bằng pixel (px), em (em), phần trăm (%) hoặc đơn vị CSS hợp lệ khác.

Ví dụ:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

Trong ví dụ này, phần tử .parent được đặt làm phần tử tổ tiên có vị trí xác định bằng position: relative;. Phần tử .child được định vị tuyệt đối bằng position: absolute;, với vị trí cách mép trên 50 pixel và mép trái 100 pixel của phần tử tổ tiên có vị trí xác định gần nhất (phần tử .parent).

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có một phần tử cha (<div>) chứa hai phần tử con (<div>) có các lớp box1 và box2. Nhiệm vụ của bạn là dùng định vị tuyệt đối để định vị phần tử box2 bên trong parent. Hãy làm theo các bước sau:

Viết một quy tắc CSS nhắm đến phần tử <div> có lớp parent. Đặt thuộc tính position của phần tử này thành relative để biến nó thành phần tử tổ tiên được định vị.
Viết một quy tắc CSS nhắm đến phần tử <div> có lớp box2.
Đặt thuộc tính position của phần tử .box2 thành absolute.
Đặt thuộc tính top của phần tử .box2 thành 30px và thuộc tính right thành 20px. Thao tác này sẽ định vị hộp cách phía trên 30 pixel và cách phía bên phải 20 pixel so với phần tử tổ tiên được định vị của nó (parent).

Tự làm thử

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>