CSS có các vị trí khác nhau có thể được áp dụng cho các phần tử. Chúng bao gồm
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
0, .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
1,.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
2, .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
3, và .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
4. Các vị trí này chỉ định cách định vị một phần tử trong tài liệu khiến phần tử đó hoạt động khác điTrong bài viết này, chúng ta sẽ hiểu sự khác biệt giữa các vị trí này
Các yếu tố định vị và không định vị
Trước khi xem xét các kiểu vị trí này, điều đầu tiên cần hiểu là các phần tử được định vị và không được định vị
Các phần tử không được định vị xuất hiện trên một trang theo thứ tự chúng được khai báo trong DOM và chúng chiếm nhiều dung lượng nhất có thể. Không thể áp dụng định vị dọc và ngang [
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
5, .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
6, .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
7 .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
8] cho các phần tử đó vì chúng không được định vịNgược lại, định vị dọc và ngang có thể được áp dụng cho các phần tử được định vị. Theo mặc định, các phần tử được định vị xuất hiện trên một trang giống như chúng ở trạng thái tĩnh, nhưng việc sử dụng định vị theo chiều dọc và chiều ngang có thể ảnh hưởng đến chúng theo cách khác nhau, tùy thuộc vào loại vị trí
Bây giờ, hãy xem xét các phong cách vị trí này
vị trí tĩnh
Vị trí
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
0 là kiểu vị trí mặc định cho các phần tử. Với phong cách này, các phần tử không được định vị--chúng xuất hiện như trong tài liệu đánh dấu. Phong cách này cũng là phong cách không định vị duy nhất.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
5, .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
6, .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
7 và .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
8 không phù hợp với phong cách này. Bạn có thể hình dung nó với mã này.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
4.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
Khai báo kiểu
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
6 và .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
8 trên khối màu xanh bị bỏ qua. Tất nhiên, bạn có thể áp dụng lề, nhưng điều đó sẽ ảnh hưởng đến phần tử sau nó.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
8Vị trí tương đối
Bạn có thể nghĩ về vị trí của
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
1 như một phong cách mang lại cho các yếu tố của .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
0 sự linh hoạt hơn. Nhưng không giống như .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
0, các phần tử có vị trí .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
1 được coi là phần tử được định vị. Điều này có nghĩa là các phần tử như vậy có thể xuất hiện khác với luồng đánh dấuVới
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
1, phần tử giữ nguyên luồng của nó trong tài liệu và chiếm nhiều không gian nếu cần theo mặc định, nhưng bạn có thể sử dụng các thuộc tính định vị như .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
5. Ý tưởng ở đây là phần tử có liên quan đến vị trí mặc định của nó. Sử dụng các phần tử định vị này sẽ di chuyển phần tử xung quanh vị trí mặc định mà không ảnh hưởng đến các phần tử khác. Đây là những gì tôi muốn nói.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
5Khối màu xanh lam vẫn được cho là đang lấp đầy không gian mặc định của nó, nhưng các kiểu định vị có thể di chuyển nó xung quanh mà không cần đẩy các khối khác
vị trí tuyệt đối
Các phần tử có vị trí
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
2 là các phần tử được định vị bị xóa khỏi luồng tài liệu--giống như chúng không có ở đó. Không gian của chúng trên màn hình bị lấy đi và được gán cho các phần tử khác. Đây là những gì tôi muốn nói.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
7Như bạn sẽ nhận thấy, không gian của khối màu xanh trước đó giờ đã bị khối màu xanh lá cây chiếm giữ. Ngay cả khi bạn sử dụng lề trên khối tuyệt đối, nó không ảnh hưởng đến những khối khác. Bạn có thể xem nó là phần tử tuyệt đối trong lãnh thổ của chính nó bên ngoài vùng chứa
Như hiện tại, phần tử tuyệt đối không có mối quan hệ nào với vùng chứa. Các phần tử tuyệt đối được định vị trong cha mẹ được định vị gần nhất của
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
1 và nếu không có, chúng được đặt trong chế độ xem [cửa sổ trình duyệt]. Ví dụ: với kiểu định vị là .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
54, phần tử di chuyển sang cạnh trái của phần tử gốc tương đối hoặc chế độ xemĐể thiết lập mối quan hệ giữa khối màu xanh và vùng chứa, bạn cần áp dụng lớp
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
1 cho vùng chứa.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
1Bây giờ, bạn có thể đẩy khối màu xanh đến các cạnh của thùng chứa
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
2Như bạn có thể thấy, vùng chứa đóng vai trò là ranh giới mà thuộc tính định vị có thể di chuyển phần tử tuyệt đối dọc theo. Nếu không có
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
1 cha mẹ gần nhất, khối màu xanh sẽ xuất hiện như thế nàyVị trí cố định
Vị trí
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
3 tương tự như vị trí .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
2. Sự khác biệt là vị trí cố định không tôn trọng bất kỳ cha mẹ [hoặc tổ tiên] họ hàng nào. Nó chỉ tôn trọng khung nhìn. Vì vậy, một phong cách như thế này.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
6sẽ sản xuất cái này
Phần tử
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
3 chỉ tôn trọng chế độ xem bất kể cha mẹ tương đốivị trí dính
Như tên ngụ ý, điều này làm cho một phần tử dính vào một thùng chứa. Vị trí
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
4 chuyển đổi giữa vị trí .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
1 và .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
3 trong vùng chứa cuộn. Một phần tử của kiểu vị trí này bắt đầu với vị trí .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
1, giữ nguyên luồng của nó trong tài liệu. Khi cuộn trong vùng chứa, nếu khoảng cách định vị đã chỉ định [ví dụ: với .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
5] được đáp ứng, phần tử sẽ được cố định cho đến khi vùng chứa cuộn nằm ngoài tầm nhìnĐây là một ví dụ để giải thích điều này
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
3.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
4Khi bắt đầu, khối màu xanh lam xuất hiện trong luồng tài liệu như thế này
Khi bạn cuộn trong vùng chứa và khối màu xanh đáp ứng điều kiện
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
75, nó sẽ cố định khi bạn cuộnBạn có thể dùng thử trên codepen này. Hãy thử cuộn trong vùng chứa và xem khối màu xanh đã được sửa
Xem Codepen của Dillion [@Dillion] trên CodePenGói [lại
Trong CSS, bạn có các phần tử được định vị và không được định vị. Các phần tử không được định vị xuất hiện khi luồng được khai báo trong đánh dấu. Điều này áp dụng cho kiểu vị trí
.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
0. Các phần tử được định vị có thể xuất hiện trong cùng một luồng trong một số trường hợp [_______04 và .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
1] và có thể không xuất hiện trong một số trường hợp khác [.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
2, .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
3], nhưng chúng có thể được kiểm soát bằng các kiểu định vị [.container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
5, .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
6, .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
7, .container {
margin: 20px;
height: 200px;
display: flex;
border: 1px solid black;
padding: 20px;
width: 400px;
}
.red-block,
.blue-block,
.green-block {
width: 100px;
height: 100px;
margin-right: 20px;
}
.red-block {
background-color: red;
}
.blue-block {
background-color: blue;
left: 20px;
top: 20px;
}
.green-block {
background-color: green;
}
8]