position relative là gì

Việc bố trí địa điểm những element của trang web ko đơn giản và dễ dàng như người xem thông thường suy nghĩ, tất cả rất có thể trở thành phức tạp rộng lớn thật nhiều khi trang web của người sử dụng có rất nhiều element không giống nhau. Do bại liệt, điều quan trọng là phải ghi nhận cơ hội dùng CSS nhằm bố trí địa điểm những element, kể từ này cũng tiếp tục tiết kiệm chi phí thời hạn code của tất cả chúng ta rộng lớn.

Bạn đang xem: position relative là gì

Có vô số phương pháp / cách thức không giống nhau nhằm bố trí những element và dàn trang web. Sử dụng Bootstrap là 1 cơ hội rất hay và thời gian nhanh gọn gàng, song ko nên toàn bộ những dự án công trình đều dùng Bootstrap. Trong nội dung bài viết này, bản thân tiếp tục lý giải một trong mỗi cơ hội bố trí những element với CSS thuần: tính chất position. Trong khi tất cả chúng ta rất có thể sử dụng tính chất Display với những độ quý hiếm như flex, grid, inline-block ... Hôm ni bản thân tiếp tục chỉ nói tới tính chất position nhé !

CSS Position & những tính chất Helper

Có 5 độ quý hiếm chủ yếu của position:

position: static | relative | absolute | fixed | sticky

và những tính chất sở hữu trọng trách chỉnh sửa địa điểm của element (mình gọi bọn chúng là những tính chất Helper):

top | right | bottom | left | z-index

Note: những tính chất Helper ko thể hoạt động và sinh hoạt nếu mà ko khai báo tính chất position, hoặc với position: static.

z-index là gì?

Chúng tớ sở hữu độ cao (height) và chiều rộng lớn (width) (x,y) là 2 chiều của element. Z đó là chiều loại 3 của element. Một element hiện tại thị đè lên trên bên trên một element không giống Có nghĩa là độ quý hiếm z-index của chính nó và đã được tăng. z-index cũng ko hoạt động và sinh hoạt với position: static hoặc khi không tồn tại tính chất position

Element càng phía trên thì z-index của chính nó càng tốt.

Bây giờ bản thân tiếp tục nói đến việc những độ quý hiếm của tính chất position

1. Static

position: static là độ quý hiếm đem lăm le của position. Dù tất cả chúng ta sở hữu khai báo bọn chúng hay là không thì những element sẽ tiến hành bố trí địa điểm một cơ hội như thông thường bên trên trang web.

Chúng tớ sở hữu một quãng HTML sau:

<body>
   <div class="box-orange"></div>
   <div class="box-blue"></div>
</body>

Sau bại liệt tất cả chúng ta tạo ra CSS và khái niệm position mang lại chúng:

.box-orange {          // Không khai báo position
  background: orange;
  height: 100px;
  width: 100px;       
}
.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Khai báo "static"
}

Chúng tớ rất có thể thấy và một thành quả vô cả hai ngôi trường hợp

2. Relative

position: relative: Vị trí mới nhất của một element tương quan/ tương tác cho tới địa điểm đem lăm le của chính nó.

Với position: relative và những độ quý hiếm không giống ngoài static, tất cả chúng ta rất có thể đơn giản và dễ dàng thay cho thay đổi vị trí của bọn chúng. Nhưng chỉ khai báo position: relative thôi ko đầy đủ, tất cả chúng ta sử dụng việc kiểm soát và điều chỉnh địa điểm của element bởi những tính chất helper.

Hãy dịch rời hình vuông vắn color cam sang trọng cạnh bên hình vuông vắn greed color nhé:

.box-orange {
  position: relative;  // tất cả chúng ta rất có thể dịch rời được element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // dịch gửi xuống 100px từ vựng trí ban sơ của chính nó 
  left: 100px;        // dịch gửi sang trọng nên 100px
}

Hình vuông color cam và đã được dịch 100px xuống vùng dưới bên dưới ở bên phải ví với địa điểm thông thường của chính nó.

Note: Sử dụng position: relative cho 1 element thì sẽ không còn tác động cho tới địa điểm của những element không giống.

3. Absolute

Với position: relative, một element được dịch gửi cho tới một địa điểm mới nhất dựa vào ví trí thông thường của nó. Tuy nhiên, position: absolute tiếp tục dịch gửi địa điểm của chính nó ứng với thẻ phụ vương của chính nó.

Một element được khai báo với tính chất position: absolute sẽ tiến hành vô hiệu ngoài luồng document (document flow). Vị trí đem lăm le của element tiếp tục là vấn đề chính thức (top-left) của element phụ vương. Nếu nó không tồn tại bất kể thẻ phụ vương này thì thẻ document <html> được xem là phụ vương của chính nó.

Xem thêm: act your age nghĩa là gì

position: absolute và đã được vô hiệu ngoài document flow, những element không giống bởi element được khái niệm position: absolute được xem như là đã trở nên xóa ngoài trang web.

Mình tiếp tục thêm một div container thực hiện thẻ phụ vương vô ví dụ sau:

<body>
   <div class="container">
       <div class="box-orange"></div>
       <div class="box-blue"></div>
   </div>
</body>

Và thay cho thay đổi một ít về position của chúng:

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
}

position: absolute fake element về địa điểm top-left của phụ vương nó.

Dường như thể hình vuông vắn greed color đã trở nên bặt tăm. Nhưng thực sự là nó vẫn coi như hình vuông vắn color cam đã trở nên xóa, và nó bị đưa lên địa điểm ban sơ của hình vuông vắn color cam.

Để minh chứng mang lại điều này, bản thân tiếp tục dịch hình vuông vắn cam lên đường 5px:

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  left: 5px;
  top: 5px;
}

Bây giờ tất cả chúng ta vẫn nhận ra hình vuông vắn xanh rì.

Vị trí của một element absolute tiếp tục đối sánh tương quan với địa điểm của phụ vương nó nếu như thẻ phụ vương được khai báo position không giống ngoài static

.container {
  position: relative;
  background: lightgray;
}
.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  right: 5px;    // dịch 5px đối với cạnh nên của thẻ cha
}

4. Fixed

Giống như position: absolute, những element được khai báo với position này sẽ tiến hành vô hiệu ngoài document flow. Chỉ không giống là:

  • Vị trí của bọn chúng CHỈ đối sánh tương quan với thẻ <html>
  • Chúng không trở nên tác động bươi scroll

Ở ví dụ tiếp sau, bản thân tiếp tục thay cho thay đổi position của hình vuông vắn cam trở thành fixed, và tiếp tục cơ hội lề nên 5px đối với thẻ <html>, ko nên thẻ phụ vương của chính nó (container).

Như tất cả chúng ta thấy, việc scroll trang web ko hề thay cho thay đổi vị trí của element fixed. Nó được xác xác định trí đối với hành lang cửa số trình duyệt. Và nhằm xác xác định trí của chính nó thì chúng ta cũng nên kết phù hợp với những tính chất top, right, bottom, left như 2 tính chất phía bên trên.

5. Sticky

position: sticky rất có thể hiểu giản dị là sự việc phối hợp của position: relativeposition: fixed.

Nó cũng hao hao fixed tuy nhiên mà lúc chúng ta scroll cho tới địa điểm của chính nó tiếp tục hệt như fixed và khi chúng ta scroll lên thoát khỏi nó thì nó sẽ bị quay trở lại địa điểm ban sơ bên dưới dạng relative.

Nghe khá khó khăn hiểu nên ko, nằm trong coi ví dụ nhé:

Note: position: sticky ko sử dụng được bên trên IE và một vài version đầu của Edge nên bản thân ko khuyến nghị dùng nhé.

Xem thêm: simple is the best là gì

Cảm ơn chúng ta vẫn quăng quật thời hạn nhằm hiểu nội dung bài viết của tớ !

Nguồn: How lớn use the position property in CSS lớn align elements