CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

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ó một ví dụ dễ nhìn thấy nhất đó là menu của freetuts.net 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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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;
                width: 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 freetuts.net
        </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;
                width: 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 freetuts.net
            </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;
                width: 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 freetuts.net
            </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.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top