Chủ đề nổi bật

Bài 10: Position relative - absolute trong CSS

Thuộc tính position trong CSS dùng để xác định vị trí hiển thị cho thẻ HTML và thường được dùng để xây dựng CSS cho menu đa cấp, tooltip hoặc một ...

Thuộc tính position trong CSS dùng để xác định vị trí hiển thị cho thẻ HTML và thường được dùng để xây dựng CSS cho menu đa cấp, tooltip hoặc một số chức năng khác. Position có tổng cộng 5 gias trị như bảng dưới đây nhưng trong bài này mình chỉ trình bày hai thuộc tính đó là relativeabsolute.

Tên giá trị Ý nghĩa
static Dạng mặc định - sẽ hiển thị theo đúng thứ tự của nó (thường dùng để hủy các thuộc tính bên dưới)
relative Định vị trí tuyệt đối (vị trí bao ngoài), lúc này các thẻ HTML bên trong sẽ coi nó là thẻ cha
absolute Định vị trí tương đói theo thẻ cha (thẻ khai báo relative) hoặc thẻ body nếu ko có khai báo
fixed Định vị trí tương đối cho của sổ Browser của trình duyệt (khi kéo scroll nó sẽ không bị ẩn đi)
inherit Thừa hưởng các thuộc tính từ thành phần cha (thành phần bao ngoài nó)

1. Position relative và absolute trong CSS

Ta có thể ví relative như một cái khung và absolute là một hòn bi di chuyển bên trong cái khung nên nó có thể lăn tới bất kì vị trí nào, thậm chí nó có thể lăn ra bên ngoài khung. Và để thiết lập vị trí thì ta sử dụng bốn thuộc tính sau:

  • top: lên phía trên
  • right: qua bên phải
  • bottom: xuống phía dưới
  • left: qua bên trái

Bạn chỉ có thể sử dụng nhiều nhất là 2 giá trị liền kề nhau tuân theo tọa độ đề cát, các cặp đó là: (top, right) - (right, bottom) - (bottom, left) - (left, top).

Lưu ý: Vì các giá trị (top, left, right, bottom) nằm trong tọa độ đề cát và tâm chính là các một trong những góc vuông (tùy vào cách chọn cặp) nên nếu nó mang số âm thì đối tượng HTML sẽ nằm ngoài khung.

Giả sử có ba thẻ HTML cấp 1, cấp 2, cấp 3, nếu thẻ cấp 3 là relative và thẻ cấp 2 cũng relative thì lúc này thẻ cấp 1 nếu khai báo là absolute thì nò sẽ chọn khung là thẻ có khai báo relative gần nó nhất và thẻ đó chính là thẻ cấp 2.

Ví dụ: Xây dựng HTML như hình sau:

 

Nếu chúng ta sử dụng float và margin để làm bài này vẫn được nhưng rất phức tạp. Nhưng nếu sử dụng position và các thuộc tính bổ trợ (top, left, bottom, right)  thì nó quá đơn giản.

HTML: Chúng ta tạo một thẻ div ngoài cùng và position của nó là relative, còn ba ô nhỏ bên trong ta cũng tạo 3 thẻ div và position của nó là absolute nê nó sẽ lấy thẻ div ngoài  cùng làm khung.

<div class="relative">
    <div class="absolute red"></div>
    <div class="absolute yellow"></div>
    <div class="absolute white"></div>
</div>

CSS: Chúng ta viết CSS cho các class trong đoạn mã HTML trên.

.relative{
    height: 300px;
    awidth: 300px;
    position: relative;
    margin: 100px auto;
    background: blue;
}

.absolute{
    position: absolute;
    height: 40px;
    awidth: 40px;
}

.red{
    top: 200px;
    left: 100px;
    background: red;
}

.yellow{
    top: 100px;
    left: 200px;
    background: yellow;
}

.white{
    top: 150px;
    left: 250px;
    background: white;
}

Trường hợp chúng ta không khai báo thẻ ngoài cùng là relative thì giao diện sẽ vỡ như sau:

 

Lý do là nó không tìm thấy thẻ cha nào được khai báo relative nên nó sẽ lấy thẻ body làm khung.

2. Lời kết

Thuộc tính position được sử dụng khá nhiều và điển hình nhất là xây dựng menu đa cấp bằng CSS, sau đó là các hiệu ứng tooltip kết hợp với Hover.

Vì bài viết có hạn nên mình sẽ không đưa thêm ví dụ nữa mà sẽ nói rõ hơn ở các bài thực hành tiếp theo.

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

Nguồn: code24h.com

Bài liên quan
Mới nhất

jQuery

Hàm jQuery Ví dụ Mô tả BỘ CHỌN (SELECTORS) $('*') $('*') Chọn tất cả các thành phần có trong văn bản HTML, khi sử dụng bộ chọn này có thể sẽ khiến quá trình xử lý của một số trình duyệt chậm lại. $(' tag ') $('div') Chọn thành phần theo từng tag cụ thể. $('tag. ...

Tag HTML5

Tag mới trong HTML5 Tag Mô tả Trạng thái <article> Định nghĩa một bài viết, một nội dung riêng biệt. <aside> Định nghĩa nội dung bên ngoài nội dung chính (thường là phần sidebar). <audio> Định nghĩa âm thanh, như nhạc hay trường audio khác.. ...

Tag HTML/XHTML

Tag HTML/XHTML DTD cho biết: thuộc tính HTML 4.01 / XHTML 1.0 DTD nào được cho phép. T=Transitional, S=Strict, và F=Frameset. Tag Mô tả HTML 4.01 XHTML 1.0 XHTML 1.1 Xác định một comment, một chú thích. TSF O <!DOCTYPE> Xác định mẫu cho văn bản HTML. TSF ...

Animation trong CSS

Animation là gì ? Animation (hay còn gọi là hiệu ứng) là tiến trình thay đổi hình dạng và tạo hiệu ứng di chuyển của các phần tử. CSS hỗ trợ rất nhiều hiệu ứng liên quan tới sự kiện chuyển động. Bảng dưới liệt kê tất cả các hiệu ứng bạn có thể sử dụng trong CSS. Để tìm hiểu chi tiết, ...

Chuyển đổi từ PX sang EM trong CSS

Chuyển đổi từ PX sang EM Như đã được trình bày trong chương Đơn vị trong CSS , một đơn vị được sử dụng cho chiều cao của font. Một đơn vị em tương đương với kích cỡ của một font đã cho, nếu bạn gán kích cỡ của font là 12px thì mỗi đơn vị em sẽ là 12px, do đó 2em sẽ là 24px. Do đó, trong ...

Web Safe Font trong CSS

Tổ hợp Font trong CSS CSS3 tương thích với công nghệ tổ hợp Font. Tức là, nếu trình duyệt không hỗ trợ Font đầu tiên, thì nó sẽ cố gắng thử các Font tiếp theo. Serif Font trong CSS Font family Normal bold Georgia, serif Cau van nay duoi dang Normal Text. Cau van nay ...

User Interface trong CSS | Giao diện người dùng trong CSS

Thuộc tính user interface trong CSS cho phép bạn thay đổi bất kỳ phần tử nào vào một trong các phần tử user interface chuẩn. Bảng dưới liệt kê một số thuộc tính thường được sử dụng trong User Interface trong CSS3: Giá trị Miêu tả appearance Cho phép người dùng làm cho các phần tử ...

Chia cột trong CSS

CSS3 hỗ trợ tính năng Multi Column giúp bạn sắp xếp văn bản dưới dạng cấu trúc một bài báo. Bảng dưới liệt kê một số thuộc tính Multi Column thường được sử dụng trong CSS3: Giá trị Miêu tả column-count Được sử dụng để đếm số cột mà phần tử nên được phân chia thành column-fill ...

Tổng hợp các màu trong CSS

Bảng dưới đây liệt kê 16 tên cùng mã màu (mã Hex code) đã được giới thiệu trong HTML 3.2. Bạn cũng có thể sử dụng các màu này trong CSS. Tên màu Giá trị Hex Code Màu aqua #00ffff black #000000 blue #0000ff fuchsia #ff00ff green #008000 ...

Responsive trong CSS | Responsive CSS là gì

Responsive CSS là gì ? Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt. Ví dụ: nếu giao diện website đặt một chiều rộng cố định là 800px thì chắc chắn nếu xem ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px ...