CSS giúp bạn định vị phần tử HTML của mình. Bạn có thể đặt bất kỳ phần tử HTML nào ở bất kỳ vị trí nào bạn thích. Bạn có thể chỉ định xem bạn muốn phần tử được định vị tương ứng với vị trí tự nhiên của nó trong trang hay tuyệt đối dựa trên phần tử cha của nó
Bây giờ, chúng ta sẽ thấy tất cả các thuộc tính liên quan đến định vị CSS với các ví dụ –
Định vị tương đối
Định vị tương đối thay đổi vị trí của phần tử HTML so với vị trí thường xuất hiện. Vì vậy, "trái. 20" thêm 20 pixel vào vị trí TRÁI của phần tử
Bạn có thể sử dụng hai giá trị top và left cùng với thuộc tính vị trí để di chuyển phần tử HTML đến bất kỳ đâu trong tài liệu HTML
Khi bạn muốn thiết kế các bố cục phức tạp, bạn sẽ cần thay đổi luồng tài liệu điển hình và ghi đè các kiểu trình duyệt mặc định
Bạn phải kiểm soát cách các phần tử hoạt động và được định vị trên trang
Ví dụ: bạn có thể muốn xếp các thành phần cạnh nhau hoặc chồng lên nhau theo một cách cụ thể hoặc làm cho tiêu đề "dính" vào đầu trang và không di chuyển khi bạn cuộn lên và xuống trang
Để thực hiện những điều trên và hơn thế nữa, bạn sẽ sử dụng thuộc tính
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
2 của CSSThuộc tính này nhận năm giá trị.
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
3, body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
4, body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
0, body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
1 và body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
2Trong bài viết này, chúng ta sẽ tập trung vào các giá trị
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
4 và body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
0Chúng ta sẽ xem tổng quan về cách chúng hoạt động, sự khác biệt của chúng với nhau và cách chúng được sử dụng kết hợp tốt nhất để đạt hiệu quả tối đa
Bắt đầu nào
Cách xem vị trí của các phần tử bằng Công cụ dành cho nhà phát triển Chrome
Một công cụ hữu ích trong quy trình phát triển web giao diện người dùng của bạn là Công cụ dành cho nhà phát triển của Chrome
Trong số nhiều thứ, bạn có khả năng xem mã HTML/CSS/JavaScript của bất kỳ trang web nào để hiểu các phong cách khác nhau hoạt động như thế nào
Để xem vị trí của một phần tử trên trang web trên máy Mac, hãy nhấn
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
5 và nhấp đồng thời vào phần tử mong muốn. Trên máy Window, nhấp chuột phải vào phần tử bạn muốn chọnSau đó, một menu sẽ xuất hiện và từ đó chọn
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
6Công cụ dành cho nhà phát triển Chrome sẽ mở ra
Chọn tab
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
7 và từ đó cuộn xuống phần tử body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
2 hoặc trong hộp tìm kiếm body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
9, nhập vào body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
2Vị trí mặc định của các phần tử HTML trong CSS là gì?
Theo mặc định, thuộc tính
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
2 cho tất cả các phần tử HTML trong CSS được đặt thành body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
3. Điều này có nghĩa là nếu bạn không chỉ định bất kỳ giá trị body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
2 nào khác hoặc nếu thuộc tính body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
2 không được khai báo rõ ràng thì nó sẽ là body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
3Về mặt trực quan, tất cả các thành phần tuân theo thứ tự của mã HTML và theo cách đó, luồng tài liệu điển hình được tạo ra
Các phần tử xuất hiện lần lượt – ngay bên dưới nhau, theo thứ tự của mã HMTL
Các phần tử khối như
.one {
background-color: powderblue;
position: relative;
right: 50px;
}
6 được xếp chồng lên nhau như thế này
CSS Positioning
One
Two
Three
Four
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
Thuộc tính
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
2 không được khai báo trong đoạn mã trên và do đó nó trở lại mặc định là .one {
background-color: powderblue;
position: relative;
right: 50px;
}
8. Nó tuân theo thứ tự của mã HTMLBất cứ phần tử nào đến trước trong HTML đều được hiển thị trước và mỗi phần tử theo sau phần tử tiếp theo, tạo ra luồng tài liệu như tôi đã mô tả ở trên
Trong mã của chúng tôi ở đây, div có văn bản "Một" được viết trước để nó được hiển thị đầu tiên trên trang. Ngay bên dưới hộp có dòng chữ "Hai" được hiển thị, vì nó cũng xuất hiện tiếp theo trong HTML, v.v.
Vị trí mặc định này không có chỗ cho sự linh hoạt hoặc di chuyển các yếu tố xung quanh
Điều gì sẽ xảy ra nếu bạn muốn di chuyển ô vuông đầu tiên sang bên trái của trang một chút – bạn sẽ làm điều đó như thế nào?
Có các thuộc tính offset để làm như vậy, như
.one {
background-color: powderblue;
position: relative;
right: 50px;
}
9, body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
30, body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
31 và body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
32Nhưng nếu bạn cố gắng áp dụng chúng trong khi hình vuông có vị trí tĩnh mặc định này được áp dụng cho nó, các thuộc tính này sẽ không làm gì và hình vuông sẽ không di chuyển
Những thuộc tính này không ảnh hưởng đến
.one {
background-color: powderblue;
position: relative;
right: 50px;
}
8Vị trí tương đối trong CSS là gì?
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
34 hoạt động giống như body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
35, nhưng nó cho phép bạn thay đổi vị trí của phần tửNhưng chỉ viết quy tắc CSS này sẽ không thay đổi bất cứ điều gì
Để sửa đổi vị trí, bạn sẽ cần áp dụng các thuộc tính
.one {
background-color: powderblue;
position: relative;
right: 50px;
}
9, body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
30, body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
31 và body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
32 đã đề cập trước đó và theo cách đó, chỉ định vị trí và mức độ bạn muốn di chuyển phần tửCác phần bù
.one {
background-color: powderblue;
position: relative;
right: 50px;
}
9, body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
30, body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
31 và body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
32 đẩy thẻ ra khỏi vị trí được chỉ định, hoạt động ngược lạiThực tế,
.one {
background-color: powderblue;
position: relative;
right: 50px;
}
9 di chuyển phần tử về phía dưới cùng của vùng chứa chính của phần tử. body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
30 đẩy phần tử về phía trên cùng của vùng chứa chính của phần tử, v.v.Bây giờ, bạn có thể di chuyển ô vuông đầu tiên sang trái bằng cách cập nhật CSS như thế này
________số 8Ở đây, hình vuông đã di chuyển
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
06 từ bên trái của vị trí được cho là theo mặc địnhbody {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
07 thay đổi vị trí của phần tử liên quan đến phần tử cha và liên quan đến chính nó và vị trí thường có trong luồng tài liệu thông thường của trang. Điều này có nghĩa là nó liên quan đến vị trí ban đầu của nó trong phần tử chaNó di chuyển thẻ dựa trên vị trí hiện tại của nó, so với vị trí thông thường của nó và so với các thẻ xung quanh mà không ảnh hưởng đến bố cục của chúng
Sử dụng các giá trị bù trừ này và
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
34, bạn cũng có thể thay đổi thứ tự xuất hiện các thành phần trên trangHình vuông thứ hai có thể xuất hiện trên đầu hình vuông đầu tiên
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
3Thứ tự trực quan hiện đã bị đảo ngược, trong khi mã HTML vẫn giống hệt nhau
Tóm lại, các yếu tố được định vị tương đối có thể di chuyển xung quanh trong khi vẫn ở trong luồng tài liệu thông thường
Chúng cũng không ảnh hưởng đến bố cục của các yếu tố xung quanh
Vị trí tuyệt đối trong CSS là gì?
Nếu bạn cập nhật quy tắc CSS cho hình vuông đầu tiên thành quy tắc sau
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
0Bạn sẽ nhận được kết quả này
Đây là hành vi bất ngờ. Hình vuông thứ hai đã hoàn toàn biến mất
Nếu bạn cũng thêm một số thuộc tính bù đắp như thế này
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
5Chà, bây giờ hình vuông đã hoàn toàn từ bỏ cha mẹ của nó
Các yếu tố được định vị tuyệt đối hoàn toàn bị loại bỏ khỏi luồng thông thường của trang web
Chúng không được định vị dựa trên vị trí thông thường của chúng trong luồng tài liệu mà dựa trên vị trí của tổ tiên của chúng
Trong ví dụ trên, hình vuông được định vị tuyệt đối nằm bên trong cha được định vị tĩnh
Điều này có nghĩa là nó sẽ được định vị tương đối so với toàn bộ trang, có nghĩa là liên quan đến phần tử
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
09 – gốc của trangDo đó, tọa độ,
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
50 và body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
51, dựa trên toàn bộ trangNếu bạn muốn áp dụng tọa độ cho phần tử cha của nó, bạn cần định vị tương đối phần tử cha bằng cách cập nhật
body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
52 trong khi vẫn giữ nguyên body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
53body {
margin: 100px auto;
}
.parent {
width: 500px;
border: 1px solid red;
margin: auto;
text-align: center;
}
.child {
border-radius: 10%;
width: 100px;
height: 100px;
margin: 20px;
}
.one {
background-color: powderblue;
}
.two {
background-color: royalblue;
}
.three {
background-color: sienna;
}
.four {
background-color: slateblue;
}
1Mã này tạo ra kết quả dưới đây
Vị trí tuyệt đối đưa các thành phần ra khỏi luồng tài liệu thông thường đồng thời ảnh hưởng đến bố cục của các thành phần khác trên trang
Sự kết luận
Hy vọng bây giờ bạn đã hiểu rõ hơn về cách thức hoạt động của định vị tương đối và tuyệt đối
Nếu bạn muốn tìm hiểu thêm về HTML và CSS, bạn có thể lưu và làm việc với danh sách phát này trên kênh YouTube của freeCodeCamp
Nó bao gồm các video để giúp bạn bắt đầu từ đầu và nó sẽ giúp bạn nắm bắt tốt các nguyên tắc cơ bản
freeCodeCamp cũng cung cấp Chứng chỉ thiết kế web đáp ứng dựa trên dự án tương tác và miễn phí, đây là một nơi tuyệt vời để bắt đầu hành trình phát triển web giao diện người dùng của bạn
Cảm ơn đã đọc và học tập vui vẻ
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Học một cái gì đó mới mỗi ngày và viết về nó
Nếu bài viết này hữu ích, hãy tweet nó
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu