Định vị cố định

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

Trong CSS, định vị cố định giữ một phần tử ở cùng một vị trí trên màn hình, bất kể bạn cuộn bao xa. Khi đặt position: fixed;, 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 sẽ không tính đến nó. Phần tử luôn cố định theo cửa sổ trình duyệt, rất hữu ích cho đầu trang, chân trang hoặc menu cần luôn hiển thị.

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

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: fixed;: Khai báo này đặt chế độ định vị của phần tử thành cố định.

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 khung nhìn. 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 các đơn vị CSS hợp lệ khác.

Ví dụ:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

Trong ví dụ này, phần tử có lớp header được cố định ở đầu khung nhìn bằng position: fixed;, top: 0; và left: 0;.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có tiêu đề (<div>) và một đoạn văn (<p>). Nhiệm vụ của bạn là dùng định vị cố định để giữ tiêu đề ở đầu khung nhìn ngay cả khi bạn cuộn trang. Hãy làm theo các bước sau:

Viết một quy tắc CSS áp dụng cho phần tử <div> có lớp header.
Đặt thuộc tính position của phần tử .header thành fixed.
Đặt thuộc tính top của phần tử .header thành 0 và thuộc tính left thành 0. Như vậy, tiêu đề sẽ nằm ở góc trên bên trái của khung nhìn.
Đặt thuộc tính width của phần tử .header thành 100% để phần tử trải rộng hết khung nhìn.
Đặt thuộc tính background-color của phần tử .header thành #fcc726 (màu vàng ánh kim) để tiêu đề nổi bật trên nền nội dung trang.
Đặt thuộc tính text-align thành center để giao diện trông đẹp hơn.

Tự làm thử

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>