CSS Position – Sử dụng thuộc tính Position trong CSS

Posted by Lập Trình Viên CSS 7 phút đọc

CSS Position là một thuộc tính được sử dụng để đặt vị trí cho một phần tử trong HTML. Nó cũng được sử dụng để đặt một phần tử phía sau một phần tử khác và cũng hữu ích cho hiệu ứng hoạt hình được tạo bởi các kịch bản. Bạn có thể đặt vị trí cho một phần tử bằng cách sử dụng các thuộc tính top, bottom, left và right. Những thuộc tính này chỉ có thể được sử dụng sau khi thuộc tính position đã được thiết lập. Thuộc tính computed position của một phần tử được xác định bằng relative, absolute, fixed hoặc sticky.

Trong bài viết này, chúng ta sẽ tìm hiểu về các loại thuộc tính CSS Position. Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Position là gì ?

Thuộc tính CSS Position được sử dụng để đặt vị trí cho một phần tử trong HTML. Có bốn loại vị trí: relative, static, absolute và fixed. Mỗi loại vị trí này có những đặc điểm riêng biệt và được sử dụng trong các trường hợp khác nhau.

CSS Position là một thuộc tính rất hữu ích cho các nhà thiết kế web. Nó giúp cho các phần tử của một trang web có thể được đặt vị trí theo ý muốn. Ngoài ra, CSS Position còn hữu ích cho việc tạo hiệu ứng hoạt hình và sử dụng kịch bản để tạo ra các trang web động.

Hướng dẫn CSS Position

CSS Static Positioning

Đây là vị trí mặc định cho các phần tử HTML. Nó luôn đặt một phần tử theo luồng bình thường của trang web và không bị ảnh hưởng bởi các thuộc tính top, bottom, left và right.

CSS Fixed Positioning

Thuộc tính fixed positioning giúp cho văn bản được đặt cố định trên trình duyệt. Văn bản này được đặt vị trí liên quan đến cửa sổ trình duyệt và không di chuyển khi bạn cuộn cửa sổ.

Cách sử dụng:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p.pos_fixed {  
    position: fixed;  
    top: 50px;  
    right: 5px;  
    color: blue;  
}  
</style>  
</head>  
<body>  
  
<p>Some text...</p><p>Some text...</p><p>Some text...</p><p>........</p><p>.... ...</p  
><p>........</p><p>........</p><p>........</p><p>........</p>  
<p>........ </p><p>........</p><p>........</p><p>........</p><p>........</p>  
<p>........</p><p>........</p><p>Some text...</p><p>Some text...</p><p>Some text...</p>  
<p class="pos_fixed">This is the fix positioned text.</p>  
</body>  
</html>

CSS Relative Positioning

Thuộc tính relative positioning được sử dụng để đặt phần tử liên quan đến vị trí bình thường của nó.

Cách sử dụng:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h2.pos_left {  
    position: relative;  
    left: -10px;  
}  
h2.pos_right {  
    position: relative;  
    left: 30px;  
}  
</style>  
</head>  
<body>  
<h2>This is a heading with no position</h2>  
<h2 class="pos_left">This heading is positioned left according to its normal position</h2>  
<h2 class="pos_right">This heading is positioned right according to its normal position</h2>  
<p>The style "left:-30px" subtracts 30 pixels from the element's original left position.</p>  
<p>The style "left:30px" adds 30 pixels to the element's original left position.</p>  
</body>  
</html>

Kết Quả:

CSS Absolute Positioning

Thuộc tính absolute positioning được sử dụng để đặt vị trí cho một phần tử liên quan đến phần tử cha gần nhất có thuộc tính position là relative, absolute hoặc fixed. Nếu không có phần tử cha nào có thuộc tính position khác với static thì phần tử chứa nó là HTML.

Cách sử dụng:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h2 {  
    position: absolute;  
    left: 150px;  
    top: 250px;  
}  
</style>  
</head>  
<body>  
<h2>This heading has an absolute position</h2>  
<p> The heading below is placed 150px from the left and 250px from the top of the page.</p>  
</body>  
</html>

Ưu và Nhược điểm CSS Position

Ưu điểm

  • CSS Position giúp cho các phần tử của một trang web có thể được đặt vị trí theo ý muốn.
  • Nó hữu ích cho việc tạo hiệu ứng hoạt hình và sử dụng kịch bản để tạo ra các trang web động.
  • Nó giúp cho việc thiết kế và trình bày trang web trở nên dễ dàng hơn.

Nhược điểm

  • CSS Position có thể gây ra những lỗi trong khi thiết kế trang web.
  • Việc sử dụng quá nhiều thuộc tính position cũng có thể ảnh hưởng đến hiệu suất của trang web.

Lời khuyên CSS Position

Khi sử dụng CSS Position, hãy lưu ý rằng nó chỉ nên được sử dụng khi cần thiết. Hãy tránh việc sử dụng quá nhiều các thuộc tính position trong một trang web vì nó có thể ảnh hưởng đến hiệu suất của trang web. Chúng ta nên chọn cẩn thận loại vị trí phù hợp với từng trường hợp cụ thể và áp dụng chúng một cách hợp lý.

Tại sao lại cần sử dụng CSS Position?

CSS Position giúp cho các nhà thiết kế web có thể đặt vị trí cho các phần tử trong trang web theo ý muốn và tạo ra hiệu ứng hoạt hình.

Có bao nhiêu loại vị trí CSS Position? 

Có bốn loại vị trí: relative, static, absolute và fixed.

Thuộc tính nào được sử dụng để đặt vị trí cố định trên trình duyệt?

Thuộc tính fixed positioning được sử dụng để đặt vị trí cố định trên trình duyệt.

Khi nào nên sử dụng CSS Position?

CSS Position nên được sử dụng khi cần thiết và tránh việc sử dụng quá nhiều các thuộc tính position trong một trang web.

CSS Position có những ưu điểm gì?

CSS Position giúp cho các phần tử của một trang web có thể được đặt vị trí theo ý muốn, hữu ích cho việc tạo hiệu ứng hoạt hình và sử dụng kịch bản để tạo ra các trang web động.