Thuộc tính position trong css | Tìm ở đây

Thuộc tính position dùng để xác định vị trí cho một phần tử được sử dụng (tĩnh, tương đối, cố định, tuyệt đối, bám dính).

Tóm Tắt

Thuộc tính position

Thuộc tính position dùng để xác định vị trí cho một phần tử được sử dụng.

Có 5 thuộc tính giá trị khác nhau:

Bạn đang đọc: Thuộc tính position trong css | Tìm ở đây

static
relative
fixed
absolute
sticky

Các phần tử sau đó được đặt vị trí bằng cách 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 hoạt động trừ khi thuộc tính position được đặt trước. Chúng cũng hoạt động khác nhau tùy thuộc vào giá trị position.

position : static

Các thành phần HTML mặc định được đặt vị trí tĩnh .

Các phần tử được đặt vị trí tĩnh không bị ảnh hưởng bởi các thuộc tính: : top, bottom, left, và right.

Một phần tử với position: static; không thể đặt vị trí theo bất kỳ cách nào khác; nó luôn được đặt vị trí theo dòng bình thường của trang:

Phần tử

này có position: static;

Ví dụ :


div.static {
  position: static;
  border: 3px solid #73AD21;
}

position : relative

Một phần tử với position: relative; được đặt vị trí so với vị trí bình thường của nó. Đặt các thuộc tính top, bottom, left, và right của một phần tử có vị trí tương đối sẽ khiến nó bị điều chỉnh khỏi vị trí bình thường của nó.

Phần tử

này có position: relative;

Ví dụ :

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

position : fixed

Một phần tử với position: fixed; được đặt vị trí so với khung trình duyệt, có nghĩa là phần tử đó luôn nằm cùng một vị trí ngay cả khi trang được cuộn. Các thuộc tính top, bottom, left, và right được sử dụng để đặt vị trí phần tử.

Một thành phần fixed không để lại khoảng trống trên trang mà nó thường được nằm .

Phần tử

này có position: fixed;

Lưu ý thành phần cố định và thắt chặt ở góc dưới bên phải của trang. Đây là CSS được sử dụng :
Ví dụ :


div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

position : absolute

Một phần tử với position: absolute; được đặt vị trí tương đối với phần tử cha đầu tiên được đặt vị trí gần nhất (thay vì được đặt vị trí so với khung trình duyệt, như cố định).

Tuy nhiên ; nếu một thành phần được đặt vị trí tuyệt đối không có thành phần cha tiên phong được đặt vị trí, nó sẽ sử dụng phần thân tài liệu và vận động và di chuyển cùng với việc cuộn trang .

Lưu ý: Phần tử “được đặt vị trí” là phần tử có vị trí là bất kỳ thứ gì ngoại trừ static.

Phần tử

này có position: relative;

Xem thêm: Khối finally trong Java

Phần tử

này có position: absolute;

Ví dụ :


div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

position : sticky

Một phần tử với position: sticky;được đặt dựa trên vị trí khi người dùng cuộn trang. Phần tử sticky sẽ thay đổi giữa relative và fixed tùy thuộc vào vị trí cuộn. Nó sẽ là relative cho tới khi vị trí tới điểm của khung trình duyệt, khi đó nó sẽ “dính chặt” ở đó (giống position: fixed).

Try to scroll inside this frame to understand how sticky positioning works.

I am sticky !
In this example, the sticky element sticks to the top of the page ( top : 0 ), when you reach its scroll position .
Scroll back up to remove the stickyness .
Some text to enable scrolling .. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus .
Some text to enable scrolling .. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus .

Lưu ý: Internet Explorer không hỗ trợ định vị cố định. Safari yêu cầu tiền tố -webkit- (xem ví dụ bên dưới). Bạn cũng phải xác định tại một trong ít nhất top, right, bottom hoặc left để định vị dính để làm việc.

Trong ví dụ này, phần tử dính sẽ dính vào đầu trang ( top: 0), khi bạn đến vị trí cuộn của nó.

Ví dụ :


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

Các thành phần chồng lên nhau

Khi những thành phần được đặt vị trí, chúng hoàn toàn có thể chồng lên những thành phần khác .

Các thuộc tính z-index xác định thứ tự chồng của một phần tử(phần tử nào nên được đặt ở phía trước, hoặc phía sau, những phần tử khác).

Một thành phần hoàn toàn có thể có giá trị thứ tự dương hoặc âm :

Đây là một tiêu đề

Vì hình ảnh có chỉ số z là – 1 nên nó sẽ được đặt phía sau văn bản .

Ví dụ:

Xem thêm: Tìm hiểu box-sizing trong CSS3


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

Phần tử có giá trị thứ tự lớn hơn luôn đứng trước phần tử có giá trị thứ tự thấp hơn.

Lưu ý:Nếu hai phần tử được đặt vị trí chồng lên nhau mà không z-index được chỉ định, phần tử được đặt vị trí cuối cùng trong mã HTML sẽ được hiển thị ở trên cùng.

Tất cả những thuộc tính xác định CSS

Thuộc tính	Miêu tả
bottom	Đặt cạnh lề dưới cùng cho một hộp đã định vị
clip	Cắt một phần tử được định vị tuyệt đối
left	Đặt cạnh lề trái cho một hộp đã định vị
position	Chỉ định kiểu đặt vị trí cho một phần tử
right	Đặt cạnh lề phải cho một hộp đã định vị
top	Đặt cạnh lề trên cùng cho một hộp được định vị
z-index	Đặt giá trị thứ tự của một phần tử

Source: https://final-blade.com
Category: Kiến thức Internet

admin

final-blade.com