8.1 Dòng chảy bình thường
Định vị các phần tử trong CSS đóng vai trò quan trọng trong việc quản lý vị trí và tương tác của chúng trên trang web. Nó xác định cách các phần tử được đặt so với các phần tử khác và so với bộ chứa của chúng. Hãy xem xét cách mà các loại định vị khác nhau ảnh hưởng đến dòng chảy của các phần tử.
Dòng tài liệu và định vị
Các phần tử trong dòng tài liệu bình thường được sắp xếp lần lượt theo thứ tự được xác định bằng HTML-markup. Các phần tử khối
(ví dụ <div>, <p>, <h1>) được đặt theo chiều dọc,
chiếm toàn bộ chiều rộng của bộ chứa cha mẹ, trong khi các phần tử dòng (ví dụ <span>, <a>, <em>)
được đặt theo chiều ngang, chỉ chiếm không gian cần thiết.
Ví dụ:
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
<div class="block">Phần tử khối</div>
<span class="inline">Phần tử dòng</span>
<span class="inline">Phần tử dòng</span>
8.2 Ảnh hưởng của định vị lên dòng tài liệu
Các loại định vị khác nhau có thể thay đổi dòng tài liệu chuẩn. Hãy xem xét cách điều này xảy ra:
Định vị static
Định vị static là giá trị mặc định và không thay đổi dòng tài liệu bình thường. Các phần tử
với position: static được đặt theo thứ tự xác định bởi HTML-markup.
Ảnh hưởng lên dòng:
- Các phần tử ở lại trong dòng chảy bình thường
- Các phần tử được đặt lần lượt theo thứ tự trong HTML
Định vị relative
Các phần tử với position: relative ở lại trong dòng chảy bình thường, nhưng có thể được di chuyển so với vị trí
bình thường của chúng bằng cách sử dụng các thuộc tính top, right, bottom, left.
Sự di chuyển không ảnh hưởng đến vị trí của các phần tử khác.
Ảnh hưởng lên dòng:
- Các phần tử ở lại trong dòng chảy bình thường
- Sự di chuyển của phần tử không thay đổi vị trí các phần tử lân cận
Định vị absolute
Các phần tử với position: absolute được loại bỏ khỏi dòng tài liệu bình thường và được đặt so với phần tử tổ tiên
đã định vị gần nhất. Nếu không có tổ tiên như vậy, chúng sẽ được đặt so với bộ chứa
ban đầu (thường là <html> hoặc <body>).
Ảnh hưởng lên dòng:
- Các phần tử được loại bỏ khỏi dòng chảy bình thường
- Đặt so với phần tử tổ tiên đã định vị gần nhất
- Các phần tử khác hành xử như thể các phần tử này không tồn tại
Định vị fixed
Các phần tử với position: fixed được loại bỏ khỏi dòng chảy bình thường và đặt so với cửa sổ trình duyệt.
Chúng vẫn ở vị trí cố định khi cuộn trang.
Ảnh hưởng lên dòng:
- Các phần tử được loại bỏ khỏi dòng chảy bình thường
- Đặt so với cửa sổ trình duyệt
- Ở vị trí cố định khi cuộn trang
- Các phần tử khác hành xử như thể các phần tử này không tồn tại
Định vị sticky
Các phần tử với position: sticky hành xử như được định vị tương đối cho đến khi chúng đạt đến
ngưỡng cuộn đặt trước, sau đó chúng trở nên cố định.
Ảnh hưởng lên dòng:
- Các phần tử ở lại trong dòng chảy bình thường cho đến khi đạt ngưỡng cuộn
- Sau khi đạt ngưỡng, phần tử được cố định và không còn ảnh hưởng đến dòng chảy bình thường nữa
8.3 Ví dụ trực quan về ảnh hưởng lên dòng chảy
1. Ví dụ với định vị cố định:
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="fixed">Phần tử cố định</div>
<div class="content">Nội dung có thể cuộn
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
2. Ví dụ với định vị dính:
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="sticky">Phần tử dính</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
GO TO FULL VERSION