Cơ bản về định vị

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

Trong CSS, định vị là một tập hợp thuộc tính giúp bạn kiểm soát vị trí của các phần tử trên trang web. Theo mặc định, các phần tử được định vị theo luồng thông thường của tài liệu HTML. Tuy nhiên, với tính năng định vị trong CSS, bạn có thể đưa các phần tử ra khỏi luồng thông thường và đặt chúng ở những vị trí cụ thể so với phần tử chứa chúng hoặc khung nhìn (vùng hiển thị của cửa sổ trình duyệt).

Có một số giá trị cho thuộc tính position, mỗi giá trị có cách hoạt động riêng:

static: Đây là giá trị mặc định. Phần tử được định vị theo luồng thông thường của tài liệu. Các thuộc tính top, right, bottom và left không có tác dụng.

relative: Phần tử được định vị tương đối với vị trí bình thường của nó. Thiết lập các thuộc tính top, right, bottom và left sẽ di chuyển phần tử khỏi vị trí bình thường, nhưng phần tử vẫn chiếm chỗ trong luồng thông thường.

absolute: Phần tử được đưa ra khỏi luồng thông thường và định vị tương đối với phần tử tổ tiên gần nhất có định vị (phần tử tổ tiên có giá trị position khác static). Nếu không tìm thấy phần tử tổ tiên nào có định vị, phần tử sẽ được định vị tương đối với khối chứa ban đầu (thường là khung nhìn).

fixed: Phần tử bị loại khỏi luồng thông thường và được định vị so với khung nhìn. Phần tử vẫn cố định tại chỗ ngay cả khi bạn cuộn trang.

Đây là cú pháp cơ bản để sử dụng thuộc tính position:

selector {
    position: value;
}

value: Cách định vị mong muốn (ví dụ: static, relative, absolute, fixed, sticky).

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 một phần tử con (<div>). Nhiệm vụ của bạn là dùng thuộc tính position để thay đổi ngữ cảnh định vị của các phần tử. 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 container. Đặt thuộc tính position thành relative. Nhờ đó, phần tử này sẽ trở thành phần tử tổ tiên được định vị của các phần tử con.
Viết một quy tắc CSS nhắm đến phần tử <div> có lớp box. Đặt thuộc tính position thành absolute. Thao tác này sẽ đưa phần tử ra khỏi luồng bình thường và cho phép bạn định vị nó tương đối với phần tử tổ tiên được định vị gần nhất (container).
Đặt thuộc tính top của phần tử .box thành 50px và thuộc tính left thành 100px. Thao tác này sẽ định vị hộp cách mép trên 50 pixel và cách mép trái 100 pixel của phần tử tổ tiên được định vị (container).

Tự làm thử

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>