Hướng dẫn possession css - sở hữu css

Question

Trang chủ
Tham khảo
CSS
Thuộc tính position

Nội dung chính Show

Định nghĩa và sử dụng
Cấu trúc
Trình duyệt hỗ trợ
Thuộc tính <html> <head></head> <body> <div> <p>HỌC WEB CHUẨN</p> </body> </div> </html>6 và helper
div { border: 1px solid red; height: 80px; } div p { background: #00CCFF; width: 80px; }6 là gì?
2. Relative
3. Absolute

Định nghĩa và sử dụng

Thuộc tính position xác định loại của phương pháp định vị trí cho thành phần.

Thuộc tính position thường dùng kèm với các thuộc tính định vị trí: left, right, bottom, top

Cấu trúc

tag {
    position: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
position	static	position: static;	Thành phần sẽ nằm theo thứ tự trong văn bản, đây là dạng mặc định.
relative	position: relative;	Định vị trí tuyệt đối cho thành phần.
absolute	position: absolute;	Định vị trí tuyệt đối cho thành phần theo thành phần bao ngoài (thành phần định vị trí tương đối position: relative;) hoặc theo cửa sổ trình duyệt.
fixed	position: fixed;	Định vị trí tương đối cho thành phần theo cửa sổ trình duyệt.
inherit	position: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

HTML viết:

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

Giả sử ban đầu CSS viết:

div {
    border: 1px solid red;
    height: 80px;
}

div p {
    background: #00CCFF;
    width: 80px;
}

Hiển thị trình duyệt khi chưa có thuộc tính position:

Thêm thuộc tính position vào CSS:

div {
    border: 1px solid red;
    height: 80px;
    position: relative;
}

div p {
    background: #00CCFF;
    width: 80px;
    position: absolute;
    right: -20px;
    top: 15px;
}

Hiển thị trình duyệt khi có CSS:

Trình duyệt hỗ trợ

Thuộc tính position được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype

Nếu bạn mới làm quen với CSS, việc căn chỉnh các phần tử với thuộc tính

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

6 có thể không dễ dàng như bạn tưởng tượng. Mọi thứ sẽ trở nên phức tạp hơn khi dự án lớn hơn và nếu không hiểu rõ cách CSS giải quyết vấn đề căn chỉnh các phần tử HTML, bạn sẽ không thể khắc phục các vấn đề về căn chỉnh của mình.

Có nhiều cách/phương pháp khác nhau để định vị (xác định vị trí) các phần tử bằng CSS thuần túy. Sử dụng các thuộc tính

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

7,

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

8 và

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

6 trong CSS là những phương pháp phổ biến nhất. Trong bài viết này, mình sẽ giải thích một trong những cách khó hiểu nhất để căn chỉnh các phần tử bằng CSS thuần túy: thuộc tính

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

6.

Bạn cũng có thể xem hướng dẫn căn chỉnh với

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

6 trong CSS bằng video tại đây.

Bây giờ thì bắt đầu thôi!

Thuộc tính <html> <head></head> <body> <div> <p>HỌC WEB CHUẨN</p> </body> </div> </html>6 và helper

Chúng ta có 5 giá trị chính cho thuộc tính

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

6:

div {
    border: 1px solid red;
    height: 80px;
}

div p {
    background: #00CCFF;
    width: 80px;
}

4

và các thuộc tính bổ sung để thiết lập tọa độ của một phần tử (mình gọi chúng là “thuộc tính helper”):

div {
    border: 1px solid red;
    height: 80px;
}

div p {
    background: #00CCFF;
    width: 80px;
}

5 AND the

div {
    border: 1px solid red;
    height: 80px;
}

div p {
    background: #00CCFF;
    width: 80px;
}

6

Lưu ý quan trọng: thuộc tính helper không hoạt động nếu không có
<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>
6 nào được khai báo hoặc với
div { border: 1px solid red; height: 80px; } div p { background: #00CCFF; width: 80px; }
8. thuộc tính helper không hoạt động nếu không có
<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>
6 nào được khai báo hoặc với
div {
    border: 1px solid red;
    height: 80px;
}

div p {
    background: #00CCFF;
    width: 80px;
}
8.

div { border: 1px solid red; height: 80px; } div p { background: #00CCFF; width: 80px; }6 là gì?

Tưởng tượng rằng chúng ta có các thuộc tính

div {
    border: 1px solid red;
    height: 80px;
    position: relative;
}

div p {
    background: #00CCFF;
    width: 80px;
    position: absolute;
    right: -20px;
    top: 15px;
}

0 (chiều cao) là

div {
    border: 1px solid red;
    height: 80px;
    position: relative;
}

div p {
    background: #00CCFF;
    width: 80px;
    position: absolute;
    right: -20px;
    top: 15px;
}

1 và

div {
    border: 1px solid red;
    height: 80px;
    position: relative;
}

div p {
    background: #00CCFF;
    width: 80px;
    position: absolute;
    right: -20px;
    top: 15px;
}

2 (chiều rộng) là

div {
    border: 1px solid red;
    height: 80px;
    position: relative;
}

div p {
    background: #00CCFF;
    width: 80px;
    position: absolute;
    right: -20px;
    top: 15px;
}

3. Vậy

div {
    border: 1px solid red;
    height: 80px;
    position: relative;
}

div p {
    background: #00CCFF;
    width: 80px;
    position: absolute;
    right: -20px;
    top: 15px;
}

4 là chiều thứ 3. Một phần tử trong trang web đứng trước các phần tử khác khi giá trị z-index của nó tăng lên.

div {
    border: 1px solid red;
    height: 80px;
}

div p {
    background: #00CCFF;
    width: 80px;
}

6 không hoạt động với

div {
    border: 1px solid red;
    height: 80px;
}

div p {
    background: #00CCFF;
    width: 80px;
}

8 hoặc không có

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

6 nào được khai báo.

Các phần tử được sắp xếp từ sau ra trước, khi

div {
    border: 1px solid red;
    height: 80px;
}

div p {
    background: #00CCFF;
    width: 80px;
}

6 của chúng tăng lên:

Bạn có thể xem video tại đây để biết cách sử dụng z-index chi tiết hơn.

Giờ thì tiếp tục với các giá trị của thuộc tính

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

6!

1. Static

div {
    border: 1px solid red;
    height: 80px;
}

div p {
    background: #00CCFF;
    width: 80px;
}

8 là giá trị mặc định. Cho dù chúng ta có khai báo hay không, các phần tử vẫn sẽ được định vị theo thứ tự bình thường trên trang web. Ví dụ:

Đầu tiên, chúng ta định nghĩa một cấu trúc HTML:

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

Sau đó, tạo 2 hộp và xác định widths, heights & positions của chúng:

.box-orange {          // without any position declaration
  background: orange;
  height: 100px;
  width: 100px;       
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Declared as static
}

Kết quả là như nhau với việc có và không có khai báo

div {
    border: 1px solid red;
    height: 80px;
}

div p {
    background: #00CCFF;
    width: 80px;
}

8:

2. Relative

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

2: Vị trí mới của một phần tử so với vị trí bình thường của nó.Vị trí mới của một phần tử so với vị trí bình thường của nó.

Bắt đầu từ

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

2 (và đối với tất cả các giá trị

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

6 non-static) trở đi, chúng ta có thể thay đổi vị trí mặc định của phần tử bằng cách sử dụng các thuộc tính helper mà mình đã đề cập ở trên.

Thử di chuyển hộp màu cam sang bên cạnh hộp màu xanh:

.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}

Hộp màu cam được di chuyển 100px xuống dưới cùng và bên phải, so với vị trí bình thường của nó:

Lưu ý: Sử dụng
<body>
  <div class="box-orange"></div>
  <div class="box-blue"></div>
</body>
2 cho một phần tử, không ảnh hưởng đến vị trí của các phần tử khác. Sử dụng
<body>
  <div class="box-orange"></div>
  <div class="box-blue"></div>
</body>
2 cho một phần tử, không ảnh hưởng đến vị trí của các phần tử khác.

3. Absolute

Trong

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

2 , phần tử được định vị tương đối với chính nó. Tuy nhiên, một phần tử có

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

7 (định vị tuyệt đối) lại liên quan đến phần tử cha của nó.

Phần tử

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

7 bị xóa khỏi vị trí bình thường trên trang web. Nó được định vị tự động đến điểm bắt đầu (góc trên bên trái) của phần tử cha. Nếu nó không có bất kỳ phần tử cha nào thì thẻ gốc ban đầu

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

9 sẽ là phần tử cha của nó.

Từ vị trí của phần tử có thuộc tính

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

7, các phần tử khác có thể bị ảnh hưởng và hoạt động như phần tử

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

7 đã bị xóa hoàn toàn khỏi trang web.

Ví dụ nhé, thêm một

.box-orange {          // without any position declaration
  background: orange;
  height: 100px;
  width: 100px;       
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Declared as static
}

2 làm phần tử chính:

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

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

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

7 đưa phần tử màu cam về đầu phần tử cha của nó:

Bây giờ nhì thì có vẻ như hộp màu xanh lam đã biến mất, nhưng chưa đâu Hộp màu xanh dương hoạt động giống như hộp màu cam bị loại bỏ, vì vậy nó sẽ dịch chuyển đến vị trí của hộp màu cam.

Hộp màu xanh dương hoạt động giống như hộp màu cam bị loại bỏ, vì vậy nó sẽ dịch chuyển đến vị trí của hộp màu cam.

Giờ thì thử di chuyển hộp màu cam 5 pixels, chúng ta đã có thể nhìn thấy hộp màu xanh đang nằm ở vị trí nào rồi nhé!

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

Tọa độ của một phần tử có

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

7 là tương đối với phần tử cha của nó nếu phần tử cha cũng có vị trí non-static.

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

0

4. Fixed

Giống như

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

7, các phần tử có

.box-orange {          // without any position declaration
  background: orange;
  height: 100px;
  width: 100px;       
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Declared as static
}

6 cũng bị xóa khỏi vị trí bình thường trên trang. Sự khác biệt là:

Chúng chỉ có quan hệ tương đối với thẻ
```
<body>
  <div class="box-orange"></div>
  <div class="box-blue"></div>
</body>
```
9, không phải bất kỳ phần tử cha nào khác.
Chúng không bị ảnh hưởng bởi thao tác cuộn.

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

1

Ví dụ: Thay đổi vị trí của hộp màu cam thành

.box-orange {          // without any position declaration
  background: orange;
  height: 100px;
  width: 100px;       
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Declared as static
}

6 và lần này nó có vị trí tương đối là 5px so với lề phải của thẻ
<body> <div class="box-orange"></div> <div class="box-blue"></div> </body>
9 chứ không phải so với phần tử cha (vùng chứa) của nó: Thay đổi vị trí của hộp màu cam thành

.box-orange {          // without any position declaration
  background: orange;
  height: 100px;
  width: 100px;       
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Declared as static
}

6 và lần này nó có vị trí tương đối là 5px so với lề phải của thẻ

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

9 chứ không phải so với phần tử cha (vùng chứa) của nó:

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

2

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

3

Xem cụ thể cuộn trang tại đây. Như chúng ra có thể thấy, việc cuộn trang cũng không ảnh hưởng đến vị trí cố định của hộp màu cam. Nó không còn liên quan đến phần tử cha (vùng chứa) của nó nữa.

5. Sticky

.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}

0 có thể được giải thích như là sự pha trộn giữa

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

2 và

.box-orange {          // without any position declaration
  background: orange;
  height: 100px;
  width: 100px;       
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Declared as static
}

6.

Ban đầu, nó hoạt động như một phần tử có

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

2, cho đến khi thuộc tính helper được khai báo thì nó được thay đổi hành vi thành

.box-orange {          // without any position declaration
  background: orange;
  height: 100px;
  width: 100px;       
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Declared as static
}

6. Cách tốt nhất để giải thích

.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}

0 là bằng một ví dụ:ví dụ:

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

4

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

5

Ban đầu khi chưa có thao tác cuộn hoặc có thao tác cuộn nhưng phần tử có

.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}

0 chưa ở vị trí

.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}

7 thì nó hoạt động như

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

2:

Khi thao tác cuộn và phần tử có

.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}

0 bắt đầu lên đến vị trí

.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}

7 thì nó hoạt động như

.box-orange {          // without any position declaration
  background: orange;
  height: 100px;
  width: 100px;       
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Declared as static
}

6:

Lưu ý quan trong:
.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}
0 không được hỗ trợ trong Internet Explorer và một số phiên bản cũ của các trình duyệt khác. Bạn có thể kiểm tra hỗ trợ của trình duyệt tại caniuse.com.
.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}
0 không được hỗ trợ trong Internet Explorer và một số phiên bản cũ của các trình duyệt khác. Bạn có thể kiểm tra hỗ trợ của trình duyệt tại caniuse.com.

Cách tốt nhất để hiểu thuộc tính

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</body>
</div>
</html>

6 trong CSS là thực hành. Tiếp tục viết mã cho đến khi bạn hiểu rõ hơn. Nếu có bất kỳ thắc mắc nào về bài viết, hãy dể lại ý kiến ở phần bình luận nhé!

Tham khảo: Nguồn bài viếtNguồn bài viết

Thank for reading!!