Hiểu về vị trí tính toán trong CSS có thể là một trong những trải nghiệm khó khăn cho chúng ta khi bắt đầu. Nó thuộc tính xác định loại của phương pháp định vị trí cho thành phần
Constructor
tag {
position: giá trị;
}
Có 2 loại định vị
định vị tĩnh và định vị tương đối
Static positoning only has a value.
.tag {
position: static;
}
2. Nó là mặc định nên ít khi thấy nó được khai báoĐịnh vị tương đối bao gồm các giá trị.
.tag {
position: static;
}
3. Các giá trị này tương tác với nhau và cho phép bạn di chuyển các yếu tố xung quanh theo những cách thú vịđịnh vị tĩnh
Mặc dù không thường xuyên nhưng thỉnh thoảng bạn sẽ thấy nó được khai báo
.tag {
position: static;
}
Vị trí tĩnh là vị trí mặc định của mọi thành phần, bất kể bạn khai báo hay không. Tất cả các thành phần sẽ nằm theo thứ tự trong tài liệu
Định vị tương đối
Các giá trị của nó là.
.tag {
position: static;
}
4, Nó cho phép các thành phần được xác định vị trí của cuộc tấn công chính với các thuộc tính của tôi, trình duyệtTất cả các loại định vị tương đối đều có tác dụng như sau. . Được chuyển thông qua việc sử dụng thuộc tính offset, đó là. trên, trái, phải, dưới. . Chúng ta tạo ra quan hệ tương đối, nó cho phép thành phần con với
.tag {
position: static;
}
5được xác định vị trí tương đối với vị trí của yếu tố nàyVị trí tương đối
Constructor
tag {
positon: relative;
}
Elementary.
.tag {
position: static;
}
6 của một phần tử liên quan đến vị trí hiện tại của nó mà không thay đổi cục diện xung quanh vị trí đóĐể rõ ràng, khi bạn sử dụng một phần bù để chuyển trực tiếp quan một phần tử có
.tag {
position: static;
}
6, không gian mà nó chiếm trong tài liệu sẽ không chuyểnPlease view ví dụ
.ourBox {
position: relative;
top: 20px;
left: 20px;
}
Ở đây chúng ta có thể thấy phần trên của phần tử được bù 20 pixel, liên quan đến vị trí của phần tử trong luồng thông thường. Điều tương tự đang được áp dụng cho phía bên trái
Lưu ý rằng vị trí của các hộp ở hai bên không thay đổi. Hãy nhớ rằng, khi bạn bù đắp một vị trí phần tử với
.tag {
position: static;
}
6, không gian nó chiếm không di chuyển, vì vậy nó sẽ giành được ảnh hưởng đến mọi thứ xung quanh nóNó giống như chiếc hộp của chúng tôi có một tinh thần tự do và có thể đi bất cứ nơi nào nó muốn, nhưng luôn luôn liên quan đến nơi ban đầu
vị trí tuyệt đối
.tag {
position: static;
}
5 của một phần tử liên quan đến vị trí của bố mẹ và thay đổi bố cục xung quanh vị trí đóPlease view ví dụ sau
.ourBoxesParent {
position: relative;
}
.ourBox {
position: absolute;
top: 0;
left: 0;
}
Chúng ta đã thêm một bộ vị trí của hộp
.tag {
position: static;
}
6. Chúng ta cũng đã thay đổi bõ của chúng ta để được .tag {
position: static;
}
5. Bây giờ 2 ô sẽ xuất hiện cạnh nhauVị trí cố định
tag {
positon: relative;
}
2 giống như tag {
positon: relative;
}
3 nhưng có một điểm chính khác nhau. Phần tử được định vị tương ứng với chế độ xem. Điều này có nghĩa là ngay cả khi trang được cuộn, thì nó sẽ luôn ở trên màn hình ngay tại vị trí chuẩn đó và lật ngược lên trên các phần tử bên dưới Việc sắp xếp vị trí các phần tử của trang web không dễ dàng như mọi người thường nghĩ, mọi thứ có thể trở nên phức tạp hơn rất nhiều khi trang web của bạn có nhiều phần tử khác nhau. Do đó, điều cần thiết là phải biết cách sử dụng CSS để sắp xếp vị trí các phần tử, từ đó sẽ tiết kiệm thời gian mã của chúng ta hơn
Có nhiều cách / phương pháp khác nhau để sắp xếp các phần tử và dàn trang web. Sử dụng Bootstrap là một cách rất tốt và nhanh gọn, tuy nhiên không phải tất cả các dự án đều sử dụng Bootstrap. Trong bài viết này, mình sẽ giải thích một số cách sắp xếp các phần tử với CSS thuần túy. thuộc tính
top | right | bottom | left | z-index
8. Ngoài ra, chúng ta có thể sử dụng thuộc tính Display với các giá trị như flex, grid, inline-block. hôm nay mình sẽ chỉ nói về thuộc tính top | right | bottom | left | z-index
8 nhéCSS Position & các thuộc tính HelperCó 5 giá trị chính của
top | right | bottom | left | z-index
8position: static | relative | absolute | fixed | sticky
and các thuộc tính có nhiệm vụ căn cứ để điều chỉnh vị trí của phần tử [mình gọi chúng là các thuộc tính
1]top | right | bottom | left | z-index
Ghi chú. các thuộc tính Người trợ giúp không thể hoạt động nếu như không khai báo thuộc tính
8, hoặc vớitop | right | bottom | left | z-index
3
z-index là gì?
Chúng ta có chiều cao [height] và chiều rộng [chiều rộng] [x,y] là 2 chiều của phần tử. Z chính là chiều thứ 3 của phần tử. Một phần tử hiện được đảo ngược trên một phần tử khác có nghĩa là giá trị
4 của nó đã được tăng lên.
4 cũng không hoạt động với
3 hoặc khi không có thuộc tính top | right | bottom | left | z-index
8Phần tử càng ở bên thì
4 của nó càng caoBây giờ mình sẽ nói đến các giá trị của thuộc tính
top | right | bottom | left | z-index
81. tĩnh
3 is default value of top | right | bottom | left | z-index
8. Dù chúng ta có khai báo chúng hay không thì các phần tử sẽ được sắp xếp vị trí một cách bình thường trên trang webChúng ta có một đoạn HTML sau
Sau đó chúng ta tạo CSS và định nghĩa
top | right | bottom | left | z-index
8 cho chúng ta.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"
}
2. Liên quan đến
.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"
}
3. Vị trí mới của một phần tử tương quan/liên hệ tới vị trí mặc định của nóVới
.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"
}
3 và các giá trị khác bên ngoài .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"
}
5, chúng ta có thể dễ dàng thay đổi vị trí của chúng. Nhưng chỉ khai báo .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"
}
3 thôi chưa đủ, chúng ta cần đến việc điều chỉnh vị trí của phần tử bằng các thuộc tính .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"
}
7Hãy chuyển hình vuông màu cam sang bên cạnh hình vuông màu xanh nhé
.box-orange {
position: relative; // chúng ta có thể di chuyển được element
background: orange;
width: 100px;
height: 100px;
top: 100px; // dịch chuyển xuống 100px từ vị trí ban đầu của nó
left: 100px; // dịch chuyển sang phải 100px
}
Hình dạng ô màu cam đã được dịch 100px xuống phía dưới bên phải so với vị trí bình thường của nó
Ghi chú. Sử dụng
3 cho một phần tử thì sẽ không ảnh hưởng đến vị trí của các phần tử khác.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" }
3. tuyệt đối
Với
.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"
}
3, một phần tử được dịch chuyển đến một vị trí mới dựa trên vị trí bình thường của chính nó. Tuy nhiên, .box-orange {
position: relative; // chúng ta có thể di chuyển được element
background: orange;
width: 100px;
height: 100px;
top: 100px; // dịch chuyển xuống 100px từ vị trí ban đầu của nó
left: 100px; // dịch chuyển sang phải 100px
}
0 sẽ chuyển vị trí của nó tương ứng với thẻ cha của nóMột element được khai báo với thuộc tính
.box-orange {
position: relative; // chúng ta có thể di chuyển được element
background: orange;
width: 100px;
height: 100px;
top: 100px; // dịch chuyển xuống 100px từ vị trí ban đầu của nó
left: 100px; // dịch chuyển sang phải 100px
}
0 sẽ được loại bỏ khỏi luồng document [document flow]. Vị trí mặc định của element sẽ là điểm bắt đầu [top-left] của element cha. Nếu nó không có bất cứ thẻ cha nào thì thẻ document sẽ là cha của nó.Vì
.box-orange {
position: relative; // chúng ta có thể di chuyển được element
background: orange;
width: 100px;
height: 100px;
top: 100px; // dịch chuyển xuống 100px từ vị trí ban đầu của nó
left: 100px; // dịch chuyển sang phải 100px
}
0 đã bị loại khỏi luồng tài liệu, các phần tử khác do phần tử được định nghĩa là .box-orange {
position: relative; // chúng ta có thể di chuyển được element
background: orange;
width: 100px;
height: 100px;
top: 100px; // dịch chuyển xuống 100px từ vị trí ban đầu của nó
left: 100px; // dịch chuyển sang phải 100px
}
0 coi như đã bị xóa khỏi trang webMình sẽ thêm 1 div
.box-orange {
position: relative; // chúng ta có thể di chuyển được element
background: orange;
width: 100px;
height: 100px;
top: 100px; // dịch chuyển xuống 100px từ vị trí ban đầu của nó
left: 100px; // dịch chuyển sang phải 100px
}
4 làm thẻ cha trong ví dụ sau
And change a little about
top | right | bottom | left | z-index
8 of them.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
}
.box-orange {
position: relative; // chúng ta có thể di chuyển được element
background: orange;
width: 100px;
height: 100px;
top: 100px; // dịch chuyển xuống 100px từ vị trí ban đầu của nó
left: 100px; // dịch chuyển sang phải 100px
}
0 đưa phần tử về vị trí top-left của cha nóAs a shape as a blue color frame was being lost. Nhưng sự thật là nó đã coi như hình tam giác màu cam đã bị xóa, và nó được đưa lên vị trí ban đầu của hình tam giác màu cam
Để chứng minh cho điều này, mình sẽ dịch khung hình cam đi 5px
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
left: 5px;
top: 5px;
}
Bây giờ chúng ta đã nhìn thấy hình vuông xanh
Vị trí của một phần tử
.box-orange {
position: relative; // chúng ta có thể di chuyển được element
background: orange;
width: 100px;
height: 100px;
top: 100px; // dịch chuyển xuống 100px từ vị trí ban đầu của nó
left: 100px; // dịch chuyển sang phải 100px
}
7 sẽ tương ứng với vị trí của cha nó nếu thẻ cha được khai báo top | right | bottom | left | z-index
8 khác bên ngoài .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"
}
5.container {
position: relative;
background: lightgray;
}
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
right: 5px; // dịch 5px so với cạnh phải của thẻ cha
}
4. đã sửa
Giống như
.box-orange {
position: relative; // chúng ta có thể di chuyển được element
background: orange;
width: 100px;
height: 100px;
top: 100px; // dịch chuyển xuống 100px từ vị trí ban đầu của nó
left: 100px; // dịch chuyển sang phải 100px
}
0, các yếu tố được khai báo với top | right | bottom | left | z-index
8 này sẽ bị loại bỏ khỏi luồng tài liệu. Only other is- Vị trí của chúng chỉ tương ứng với thẻ
2 - Chúng không bị ảnh hưởng khi cuộn
Ở ví dụ tiếp theo, mình sẽ thay đổi
top | right | bottom | left | z-index
8 của hình vuông cam thành
4, và sẽ cách lề phải 5px so với thẻ
2, không phải thẻ cha của nó [thùng chứa]Như chúng ta thấy, việc cuộn trang web không thay đổi vị trí của phần tử
4. Nó đã được xác định vị trí so với cửa sổ duyệt. Và để xác định vị trí của nó thì các bạn cũng phải kết hợp với các thuộc tính top, right, bottom, left như 2 thuộc tính phía trên5. dính
7 có thể hiểu đơn giản là sự kết hợp của .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"
}
3 và
9Nó na ná
4 nhưng khi các bạn cuộn đến vị trí của nó sẽ giống như màn hình như
4 và khi các bạn cuộn lên khỏi nó thì nó sẽ quay lại vị trí ban đầu dưới định dạng .box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
}
2Nghe hơi khó hiểu phải không, cùng xem ví dụ nhé
Ghi chú.
7 không được sử dụng trên IE và một số phiên bản đầu tiên của Edge nên mình không khuyến khích sử dụng nhé
Vị trí tuyệt đối nghĩa là gì?
Thuộc tính Vị trí tuyệt đối . position: absolute trong CSS có tác dụng giúp định vị trí tuyệt đối cho thành . là theo cửa sổ trình duyệt.Vị trí tương đối trong HTML là gì?
Tương đối . liên quan đến. Vị trí mới của một phần tử tương quan/ liên hệ tới vị trí mặc định của nó . Với vị trí. tương đối và các giá trị khác ngoài tĩnh, chúng ta có thể dễ dàng thay đổi vị trí của chúng.Đâu là thuộc tính position trong CSS?
5 giá trị thuộc tính cơ bản của Vị trí trong CSS Thông thường chúng ta sẽ có 4 thuộc tính chính bao gồm: static, relative, fixed và absolute. Ngoài ra bạn sẽ thấy thêm các thuộc tính như. dính và 2 thuộc tính khá thú vị khác là ban đầu, kế thừa.Giá trị mặc định của thuộc tính position là gì?
5 giá trị tuyệt đối Thuộc tính Vị trí . Được xem là giá trị được hiển thị Vị trí trong CSS một cách mặc định. Các thành phần sẽ nằm đúng theo thứ tự của văn bản. - Liên quan đến. Hiểu được là định vị trí tuyệt đối cho các thành phần. Giá trị này không gây ảnh hưởng đến vị trí ban đầu hay các thành phần khác.