8.1 正常流
在CSS中定位元素在管理其在网页中的位置和交互中起到关键作用。它决定了元素相对于其他元素及其容器的放置方式。让我们看看各种定位方式如何影响元素流。
文档流和定位
在正常文档流中，元素按照HTML标记定义的顺序一个接一个地布局。块级元素（例如，<div>, <p>, <h1>）垂直排列，占据父容器的整个宽度，而行内元素（例如，<span>, <a>, <em>）水平排列，仅占用所需的空间。
示例：
CSS
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
HTML
<div class="block">块级元素</div>
<span class="inline">行内元素</span>
<span class="inline">行内元素</span>
8.2 定位对文档流的影响
不同类型的定位可能会改变标准的文档流。我们来看看这是如何发生的：
position: static 定位
position: static是默认值，不会改变正常的文档流。具有position: static的元素按HTML标记定义的顺序来放置。
对流的影响：
- 元素保持在正常流中
- 元素按照它们在HTML中的顺序一个接一个地排列
position: relative 定位
带有position: relative的元素保持在正常流中，但可以通过top, right, bottom, left属性相对于其正常位置偏移。偏移不影响其他元素的位置。
对流的影响：
- 元素保持在正常流中
- 元素的偏移不会改变邻近元素的位置
position: absolute 定位
带有position: absolute的元素从正常文档流中移出，并相对于最近的位置祖先进行放置。如果没有这样的祖先，则相对于初始容器（通常是<html>或<body>）放置。
对流的影响：
- 元素从正常流中移出
- 相对于最近的位置祖先定位
- 其他元素表现得好像这些元素不存在一样
position: fixed 定位
带有position: fixed的元素从正常流中移出，并相对于浏览器窗口放置。它们在页面滚动时保持不变。
对流的影响：
- 元素从正常流中移出
- 相对于浏览器窗口定位
- 在页面滚动时位置保持不变
- 其他元素表现得好像这些元素不存在一样
position: sticky 定位
带有position: sticky的元素在达到设定的滚动阈值前表现得像相对定位，之后变为固定定位。
对流的影响：
- 元素在达到滚动阈值前保持在正常流中
- 达到阈值后，元素固定，不再影响正常流
8.3 对流影响的视觉示例
1. 固定定位示例：
CSS
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
HTML
<div class="wrapper">
<div class="fixed">固定元素</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>
2. 粘性定位示例：
CSS
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
HTML
<div class="wrapper">
<div class="sticky">粘性元素</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