Bài 12: Position Fixed trong CSS

Hôm nay mình sẽ trình bày một thuộc tính khá hay trong CSS đó là thuộc tính position fixed trong CSS . Đây là một thuộc tính hay sử dụng và có ...

Hôm nay mình sẽ trình bày một thuộc tính khá hay trong CSS đó là thuộc tính position fixed trong CSS. Đây là một thuộc tính hay sử dụng và có một ví dụ dễ nhìn thấy nhất đó là menu của code24h.com khi kéo xuống thì nó sẽ đứng im ngay vị trí trên cùng của trình duyêt chứ không bị đẩy lên trên, đó chính là tác dụng của thuộc tính position:fixed.

1. Position Fixed trong CSS

Tương tự như thuộc tính Absolute, Fixed cũng hoạt động dựa vào một thẻ cha làm chuẩn bên ngoài. Chỉ có khác một điều là đối với Fixed thì khi bạn scrolling thì nó sẽ nằm luôn trên màn hình ngay tại vị trí chuẩn đó và đè lên trên các phần tử bên dưới.

Theo mặc định thì Fixed sẽ lấy luôn cửa sổ trình duyệt làm nơi để làm chuẩn. Nhưng nếu các thẻ cha của nó có khai báo position: relative thì nó sẽ lấy thẻ cha đó chứ không lấy của sổ trình duyệt nữa. Tuy nhiên nếu bạn khai báo một trong bốn thuộc tính sau: top - left- bottom - right thì lúc này nó sẽ không lấy thẻ cha đó nữa mà nó sẽ lấy cửa sổ trình duyệt làm chuẩn.

Ví dụ 1: XEM DEMO

Câu chào sẽ được treo phía trên cùng của trình duyệt.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body{
                height: 2000px;
                background: blue;
            }
            .fixed{
                height: 30px;
                line-height: 30px;
                background: red;
                color: #fff;
                position: fixed;
                awidth: 100%;
                top: 0px;
            }
            .bottom{
                height: 400px;
                margin-top: 600px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="fixed">
            Chào mừng bạn đến với code24h.com
        </div>
        <div class="bottom">
            
        </div>
    </body>
</html>

Ví dụ 2: XEM DEMO

Thẻ HTML Fixed không có khai báo một trong bốn thuộc tính top - left- bottom - right  nên nó sẽ  tìm thẻ cha có position:relative làm chuẩn.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body{
                height: 2000px;
                background: blue;
            }
            .relative{
                margin-top: 200px;
                position: relative;
                height: 100px;
            }
            .fixed{
                height: 30px;
                line-height: 30px;
                background: red;
                color: #fff;
                position: fixed;
                awidth: 100%;
            }
            .bottom{
                height: 400px;
                margin-top: 600px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="relative">
            <div class="fixed">
                Chào mừng bạn đến với code24h.com
            </div>
        </div>
        <div class="bottom">
            
        </div>
    </body>
</html>

Ví dụ 3: XEM DEMO

Thẻ HTML Fixed có khai báo thuộc tính top:0px nên nó sẽ lấy cửa sổ trình duyệt làm chuẩn.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body{
                height: 2000px;
                background: blue;
            }
            .relative{
                margin-top: 200px;
                position: relative;
                height: 100px;
            }
            .fixed{
                height: 30px;
                line-height: 30px;
                background: red;
                color: #fff;
                position: fixed;
                awidth: 100%;
                top: 0px;
            }
            .bottom{
                height: 400px;
                margin-top: 600px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="relative">
            <div class="fixed">
                Chào mừng bạn đến với code24h.com
            </div>
        </div>
        <div class="bottom">
            
        </div>
    </body>
</html>

Qua ba ví dụ này đã nói lên những tính chất mà bạn cần lưu ý khi sử dụng thuộc tính Fixed này.

2. Lời kết

Nếu bạn để ý kỹ thì bên sidebar mình có thiết lập position:fixed cho phần quảng cáo Google Adsense. Tại đó vì mình không có khai báo một trong bốn thuộc tính (top - left - bottom - right) nên nó Fixed theo thẻ cha. Hơi rắc rối nhưng sau này bạn sẽ kết hợp Fixed với Javascript để xây dựng các hiệu ứng trên website.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

[BÀI 11]Sử dụng Position: Fixed trong CSS

Position: Fixed – Position : Fixed cho kết quả tương tự như Position: Absolute, chỉ khác là khi kéo thanh cuộn ngang, dọc thì vị trí của đối tượng được giữ nguyên không thay đổi. -Theo mặc định thì Fixed sẽ lấy luôn cửa sổ trình duyệt làm nơi để làm chuẩn. Nhưng nếu một trong các thẻ cha ...

Vũ Văn Thanh viết 17:08 ngày 04/10/2018

[BÀI 12]Thuộc tính z-index trong CSS

Thuộc tính z-index trong CSS. Cú pháp : z-index : ‘giá trị’; Thuộc tính z-index thiết lập thứ tự xếp chồng nhau của một thành phần vị trí. Thứ tự chồng nhau được sắp xếp dựa theo giá trị số, thành phần HTML nào có chỉ số z-index cao hơn sẽ nằm trên, ngược lại sẽ nằm dưới, giá trị ...

Hoàng Hải Đăng viết 17:07 ngày 04/10/2018

[BÀI 2] Cú pháp trong CSS

Bài hôm nay chúng ta sẽ tìm hiểu về cú pháp trong CSS CÚ PHÁP CSS : Gồm 3 thành phần : + Bộ chọn (Selector). + Thuộc tính (property). +Giá trị (value). Cú pháp : XHTML ...

Bùi Văn Nam viết 17:07 ngày 04/10/2018

[BÀI 12] THUỘC TÍNH TRONG DOM

Các thuộc tính cơ bản thường dùng trong DOM . Chúng ta cùng đi tìm hiểu innerHTML Trả về mã HTML bên trong phần tử hiện tại, tất cả các đánh dấu và nội dung bên trong. Bạn cũng có thể gán đánh dấu và nội dung cho phần tử. Ví du: Hiển thị nội dung bên trong thẻ <p>. ...

Tạ Quốc Bảo viết 17:05 ngày 04/10/2018

[BÀI 9]Position Relative và Absolute trong CSS

Position Relative và Absolute trong CSS Position là thuộc tính giúp bạn tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không hề làm ảnh hưởng đến các phần tử khác . Nó gồm 5 giá trị là relative, absolute, fixed static và inherit. Absolute là cách định vị trí của một ...

Tạ Quốc Bảo viết 17:05 ngày 04/10/2018
0