CSS Position

21/05/2019

Bài sau » « Bài trước

Thuộc tính position dùng để xác định vị trí cho phần tử HTML.

Có 5 loại giá trị cho thuộc tính position:

  • relative
  • static
  • fixed
  • absolute
  • sticky

Sau đó, phần tử HTML sử dụng các thuộc tính left, right, top và bottom để canh chỉnh vị trí. Tuy nhiên, Các thuộc tính này chỉ hoạt động được khi thuộc tính position được khai báo.

Position Static

Đây là thuộc tính mặc định cho các phần tử HTML.

Phần tử HTML có thuộc tính này không bị ảnh hưởng bởi các thuộc tính left, right, top và bottom.

Phần tử HTML với thuộc tính position: static; hiển thị theo thứ tự bình thường của trang.

Thẻ <p> có position: static;

Và đây là code CSS:

p.static { position: static; border: 3px solid green; }

Position Relative

Một phần tử có position: relative; được định vị tương đối (relative) so với vị trí bình thường của nó.

Sử dụng các thuộc tính left, right, top và bottom để canh chỉnh cho thuộc tính position: relative; sẽ làm cho nó di chuyển khỏi vị trí bình thường. Các nội dung khác sẽ bỏ qua khoảng trống mà thẻ HTML đó để lại.

Thẻ <p> có position: relative; cách lề trái 20px.

Và đây là code CSS:

p.relative { position: relative; left: 20px; border: 3px solid green; }

Position Fixed

Một phần tử với position: fixed; xác định vị trí với màn hình browser. Điều này có nghĩa là nó luôn nằm cố định một chỗ khi bạn scroll browser.

Phần tử với thuộc tính position: fixed; không để lại khoảng trống ở vị trí mà nó trước khi có css.

Thẻ <p> có position: fixed; .

Phần ví dụ đang nằm ở góc phải bên dưới của màn hình. Và đây là code CSS:

p.fixed { position: fixed; right: 0; bottom: 0; border: 3px solid green; background: #cae8ca; max-width: 300px; }

Position Absolute

Một phần tử với position: absolute; dùng chỉ xác định vị trí của nó so với position của cha, ông (tổ tiên) gần nó nhất.

Tuy nhiên, Nếu một phần tử không có tổ tiên, thì vị trí của nó canh theo thẻ <body>

Chú ý: Phần tử tổ tiên của nó phải có thuộc tính position với giá trị khác static.

Dưới đây là ví dụ 1 phần tử có position: absolute nằm trong phần tử cha có position: relative;

Phần tử cha có position relative; Phần tử con có position: absolute;

Và đây là code CSS:

p.relative-parent{ position: relative; border: 3px solid green; width: 300px; height: 200px; margin: 0; } span.absolute-child{ position: absolute; bottom: 10px; left: 0; width: 50%; border: 2px solid red; }

Position Sticky

Phần tử có position: sticky; dựa theo vị trí scroll của người dùng. Phần tử sticky là sự pha trộn giữa 2 thuộc tính relativefixed. Bình thường nó sẽ nhận giá trị relative và khi người dùng scroll tới vị trí của nó, thì nó sẽ trở thành fixed.

Chú ý: Internet Explorer, Edge 15 trở về trước không hỗ trợ thuộc tính này. Safari thì phải có tiền tố -webkit- phía trước (xem ví dụ bên dưới ). Bạn phải dùng 1 trong các thuộc tính top, right, left, bottom thì nó mới hoạt động.

- Khi sử dụng thuộc tính này để làm dự án hãy cân nhắc thật kỹ. Vì vẫn còn 1 phần khách hàng sử dụng Internet Explorer hoặc Edge phiên bản cũ.

div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }

Chồng chéo phần tử

Khi phần tử HTML sử dụng các thuộc tính position, nó có thể chồng chéo lên nhau.

Thuộc tính z-index sinh ra để xác định, sắp xếp các phần tử nào nằm trên, phần tử nào nằm dưới,...

Phần tử có giá trị z-index càng cao thì càng nằm trên và z-index có thể nhận giá trị âm.

Ví dụ thẻ img sau đây có giá trị z-index -1.

img { position: absolute; left: 0; top: 0; z-index: -1; }

Chú ý: Nếu 2 phần tử có position giống nhau và nằm trùng nhau mà không có z-index thì phần tử có thứ tự nằm sau sẽ hiển thị lên trên.

CSS Position

Bài học CSS Position đến đây là kết thúc. Nếu có gì thắc mắc thì các bạn hãy để lại bình luận. Chúng tôi sẽ giải thích thêm. Chúc các bạn học tốt!


Bài sau » « Bài trước
Back to top