Thuộc tính position trong CSS

Thuộc tính position trong CSS được sử dụng để chỉnh vị trí cho một phần tử. Thuộc tính này được sử dụng kết hợp với các thuộc tính top, right, bottom và left để chỉnh vị trí cụ thể hơn cho một phần tử.

Thuộc tính position có thể nhận giá trị:

static: Box chứa nội dung phần tử sẽ được trình bày như là một phần của Document Flow một cách thông thường, theo sau phần tử trước và đặt trước các phần tử theo sau.
relative: như trên, khác ở chỗ là có thể sắp xếp một số khoảng cách cho Box này.
absolute: Box chứa nội dung phần tử sẽ được trình bày tùy theo tương quan vị trí với Block chứa Box này, và nó hoàn toàn bị xóa khỏi Document Flow.
fixed: vị trí của Box chứa nội dung phần tử sẽ được định vị trí một cách tuyệt đối. Block chứa Box này luôn luôn là ViewPort.

Cú pháp thuộc tính position trong DOM

object.style.position = "static";

Thuộc tính position có thể áp dụng cho:

Tất cả các phần tử HTML.

Quảng cáo

Ví dụ thuộc tính position trong CSS

Tiếp theo là ví dụ minh họa cách sử dụng của thuộc tính position trong CSS:

<html>
   <head>
      <style type="text/css">
         img#lead {position: absolute;}
         div.top {position: fixed; top: 0; height: 10% width: 100%;}
         sup {position: relative; bottom: 0.66em;}
      </style>
   </head>
   <body>
      <img src="../css/images/bullet.gif">
      <div>Hoc CSS co ban tai VietJack</div>
      <p>Vi du minh hoa <sup>thuoc tinh position</sup> trong CSS.</p>
   </body>
</html>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: