Căn chỉnh vị trí trong CSS

CSS giúp bạn xác định vị trí các phần tử trong tài liệu HTML. Bạn có thể đặt bất cứ phần từ HTML nào tại bất cứ đâu bạn muốn. Hoặc bạn có thể xác định vị trí tương đối của phần tử này trong mối quan hệ (lệ thuộc) vào vị trí tự nhiên trong trang hoặc vị trí tuyệt đối dựa trên phần tử cha.

Tiếp theo chúng ta cùng tìm hiểu các thuộc tính trong CSS mà được sử dụng để chỉnh vị trí của phần tử.

Thuộc tính position trong CSS

Thuộc tính position xác định kiểu phương thức xác định vị trí được sử dụng cho một phần tử. Có 4 giá trị để chỉnh vị trí khác nhau mà thuộc tính này có thể nhận, đó là:

static
relative
fixed
absolute

Các phần tử sẽ được chỉnh vị trí bởi sử dụng các thuộc tính top, bottom, left và right. Tuy nhiên, các thuộc tính này sẽ không làm việc trừ khi bạn thiết lập thuộc tính position đầu tiên. Tùy vào giá trị truyền cho, các thuộc tính này sẽ đem lại tác động khác nhau.

Vị trí tương đối trong CSS

Một phần tử nếu được xác định với position: relative; tức là được chỉnh vị trí tương đối liên quan tới vị trí thông thường của nó.

Tùy theo cách bạn thiết lập các thuộc tính (như left, right, bottom và top) tới vị trí tương đối của phần tử thì vị trí của phần tử sẽ được căn chỉnh theo vị trí thông thường của nó. Chẳng hạn, left:20 sẽ cộng vào vị trí bên trái của phần tử.

Ví dụ sau minh họa cách sử dụng thuộc tính này trong CSS:

<html>
   <head>
   </head>
   <body>
      <div style="position:relative;left:80px;top:2px;background-color:yellow;">
      Vi du gia tri relative cua thuoc tinh position.
      </div>
   </body>
</html>

Kết quả là:

Vị trí tuyệt đối trong CSS

Một phần tử nếu được xác định với position: absolute; tức là được xác định vị trí tuyệt đối. Phần tử sẽ được định vị trí theo cửa sổ trình duyệt.

Ví dụ minh họa cho vị trí tuyệt đối trong CSS:

<html>
   <head>
   </head>
   <body>
      <div style="position:absolute; left:80px; top:20px; background-color:yellow;">
      Vi du gia tri absolute cua thuoc tinh position.
      </div>
   </body>
</html>

Quảng cáo

Ví trí cố định trong CSS

Thuộc tính postion: fixed; xác định vị trí cố định cho một phần tử. Vị trí cố định này được thiết lập theo cửa sổ trình duyệt.

Ví dụ sau minh họa cách thiết lập vị trí cố định trong CSS.

<html>
   <head>
   </head>
   <body>
      <div style="position:fixed; left:80px; top:20px; background-color:yellow;">
      Vi du gia tri fixed cua thuoc tinh position.
      </div>
   </body>
</html>

Đã 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: