0
0
Posts
HM
Hoài Minhhoaiminh4321

Tìm hiểu về Position trong CSS

Đăng vào 8 tháng trước

• 3 phút đọc

Chủ đề:

CSS

Trong thiết kế web, việc sử dụng thuộc tính position trong CSS là một phần không thể thiếu để xác định cách các phần tử được đặt trên trang. Thuộc tính này cho phép các nhà phát triển web kiểm soát vị trí của các phần tử HTML một cách chính xác. Trong bài viết này, chúng ta sẽ khám phá chi tiết về thuộc tính position trong CSS, bao gồm các giá trị khác nhau mà nó có thể nhận và cách sử dụng chúng trong các tình huống thực tế.

Giới Thiệu về Thuộc Tính position

Thuộc tính position trong CSS xác định cách một phần tử được định vị trong tài liệu HTML. Có năm giá trị chính mà thuộc tính này có thể nhận: static, relative, absolute, fixed, và sticky

Static

Giá trị mặc định của thuộc tính positionstatic. Khi một phần tử được đặt ở vị trí static, nó sẽ nằm trong luồng bình thường của tài liệu và không thể di chuyển bằng các thuộc tính top, right, bottom, hay left

Relative

Khi một phần tử được đặt ở vị trí relative, nó vẫn nằm trong luồng bình thường của tài liệu nhưng có thể được di chuyển từ vị trí ban đầu của nó. Các thuộc tính top, right, bottom, và left sẽ xác định khoảng cách di chuyển từ vị trí ban đầu đó

Absolute

Phần tử có vị trí absolute được loại bỏ khỏi luồng tài liệu và không ảnh hưởng đến vị trí của các phần tử khác. Nó được định vị tương đối so với tổ tiên gần nhất không phải là static. Nếu không có tổ tiên như vậy, nó sẽ được định vị tương đối so với phần tử <html>

Fixed

Phần tử có vị trí fixed cũng được loại bỏ khỏi luồng tài liệu và được định vị tương đối so với cửa sổ trình duyệt. Nó sẽ ở lại cùng một vị trí ngay cả khi người dùng cuộn trang

Sticky

Vị trí sticky là sự kết hợp giữa relativefixed. Phần tử sẽ hành xử như một phần tử relative cho đến khi nó đạt đến một ngưỡng nhất định trong viewport, tại thời điểm đó nó trở thành fixed

Ví dụ Minh Họa

Ví dụ về position: static

html Copy
<!DOCTYPE html>
<html>
<head>
<style>
.div1 { background-color: red; height: 100px; width: 100px; }
.div2 { background-color: blue; height: 100px; width: 100px; }
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

Trong ví dụ này, hai div sẽ nằm ngay sau nhau theo thứ tự trong mã HTML vì cả hai đều có position: static.

Ví dụ về position: relative

html Copy
<!DOCTYPE html>
<html>
<head>
<style>
.div1 { position: relative; left: 30px; top: 50px; background-color: red; height: 100px; width: 100px; }
.div2 { background-color: blue; height: 100px; width: 100px; }
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

Trong ví dụ này, div1 sẽ di chuyển 30px sang phải và 50px xuống dưới so với vị trí ban đầu của nó, nhưng div2 vẫn nằm ngay sau nó trong luồng tài liệu.

Ví dụ về position: absolute

html Copy
<!DOCTYPE html>
<html>
<head>
<style>
.relative { position: relative; height: 200px; width: 400px; background-color: yellow; }
.absolute { position: absolute; top: 10px; right: 10px; background-color: red; height: 100px; width: 100px; }
</style>
</head>
<body>
<div class="relative">
<div class="absolute"></div>
</div>
</body>
</html>

Trong ví dụ này, div với class absolute sẽ được định vị tương đối so với div với class relative. Nó sẽ nằm ở góc phải trên cùng của div cha, cách 10px từ cạnh trên và phải.

Kết Luận

Thuộc tính position trong CSS là một công cụ mạnh mẽ cho phép các nhà phát triển web kiểm soát chính xác vị trí của các phần tử trên trang web. Từ việc giữ cho các phần tử nằm gọn trong luồng tài liệu đến việc loại bỏ chúng hoàn toàn khỏi luồng để tạo ra các hiệu ứng định vị độc đáo, hiểu biết về cách sử dụng các giá trị khác nhau của thuộc tính position sẽ giúp bạn tạo ra các trang web đẹp mắt và chức năng.

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào