1. CSS的position
特点值:
-
static
:默认值,元素在正常的文档流中,不会被特别定位。 -
relative
:相对于元素在文档流中的初始方位进行定位的。 -
absolute
:相对于最近的已定位(非static)先人元素定位。 -
fixed
:相对于浏览器窗口定位,即便窗口翻滚,元素也会停留在指定方位。 -
sticky
:基于翻滚方位在relative
和fixed
定位之间切换。
定位方法 | 肯定定位 | 相对定位 | 固定定位 | 粘性定位 | 静态定位 |
---|---|---|---|---|---|
定位原点 | 相对于最近的已定位先人元素 | 相对于元素自身在文档流中的方位 | 相对于浏览器窗口 | 相对于最近的定位上下文 | 元素在正常文档流中的方位 |
方位参阅 | 相对于已定位的先人元素 | 相对于元素自身原始方位 | 浏览器窗口 | 相对于最近的定位上下文 | 文档流中的方位 |
翻滚影响 | 跟着页面翻滚而移动 | 跟着页面翻滚而移动 | 固定在浏览器窗口某个方位 | 跟着页面翻滚而移动,翻滚到必定间隔则不翻滚 | 跟着页面翻滚而移动 |
元素方位调整 | 经过top、right、bottom、left特点 | 经过top、right、bottom、left特点 | 经过top、right、bottom、left特点 | 经过top、right、bottom、left特点 | 不行调整 |
2. 用于定位元素的特点:
-
top
,right
,bottom
,left
:这些特点用于指定元素相对于其包括块(通常是父元素)的方位。它们只对运用了相对定位、肯定定位、固定定位或粘性定位的元素有用。 -
z-index
:指定元素的堆叠次序。数值越大,元素越靠上。具有更高z-index值的元素会显示在具有较低z-index值的元素上方。
3. 定位类型详解及示例:
1. 静态定位
默认的定位方法。元素按正常的文档流进行排列,不会因为定位特点而改变方位。此刻,top
、right
、bottom
、left
和z-index
特点将不会有任何作用。
.static-box {
position: static;
}
2. 相对定位
答应你根据元素自身的原始方位进行调整。它不会脱离文档流,但会让空间保留在原来的方位。
.relative-box {
position: relative;
}
3. 肯定定位
元素脱离了文档流,其方位是相对于最近的定位先人确定的。假如没有定位先人,它将相对于文档的初始边界进行定位。
.absolute-box {
position: absolute;
}
4. 固定定位
元素相对于视窗进行定位,因此翻滚页面时,它的方位不会改变。经过固定定位,可以创立固定在页面某个方位的元素,比如导航栏或悬浮广告。
.fixed-box {
position: fixed;
}
5. 粘性定位
结合了相对和固定定位的特性。当页面翻滚到特定方位时,粘性元素会“粘住”视窗的某个方位。元素在跨过特定阈值前是相对定位的,之后变为固定定位。这种定位方法常用于创立翻滚时固定在页面顶部或底部的元素,比如导航栏。
.sticky-box {
position: sticky;
4. 注意事项
1. 影响文档流
肯定定位和固定定位会使元素脱离正常文档流,这或许会影响其他元素的布局。
2. 堆叠次序
运用 z-index 操控元素的堆叠次序时要当心,保证不会出现意外的掩盖情况。
3. 功能
运用大量定位元素或许会影响页面的功能,特别是在移动设备上。
4. 兼容性
不同浏览器对定位特点的解说或许略有不同,需求进行测试以保证在各种浏览器中的兼容性。
5. 翻滚条
运用固定定位时要注意,元素固定在浏览器视窗中,或许会导致长内容的页面出现不必要的翻滚条。
5. 实际运用
1. 子绝父相
父元素 .parent
设置相对定位,而子元素 .child
则设置肯定定位,并经过 top
和 left
特点将其定位在父元素的中心。经过 transform: translate(-50%, -50%);
来使子元素在笔直和水平方向上都居中。这样,子元素相对于父元素进行肯定定位,即子绝父相。
HTML 代码:
<div class="parent">
<div class="child">
子元素
</div>
</div>
CSS 代码:
.parent {
position: relative; /* 父元素设置相对定位 */
width: 300px;
height: 200px;
}
.child {
position: absolute; /* 子元素设置肯定定位 */
top: 50%; /* 相对于父元素的50%处笔直定位 */
left: 50%; /* 相对于父元素的50%处水平定位 */
transform: translate(-50%, -50%); /* 经过平移来使子元素居中 */
}
2. 吸顶作用
要实现 CSS 中的吸顶作用,可以运用 position: sticky
特点。这个特点可以使元素在翻滚到特定方位时固定在页面上,就像是吸附在顶部一样。
.header
元素运用 position: sticky;
,而且设置 top: 0;
以保证它固定在页面顶部。当翻滚页面时,.header
将保持在视口的顶部
<div class="header">这是一个吸顶头部</div>
<div class="container">
<p>这是页面的内容。当翻滚页面时,头部会固定在顶部。</p>
</div>
<style>
.container {
width: 100%;
height: 1500px; /* 用于演示翻滚作用 */
padding-top: 50px; /* 让内容不被固定的头部遮挡 */
}
.header {
position: -webkit-sticky; /* 兼容性写法 */
position: sticky;
top: 0; /* 在顶部固定 */
background-color: #333;
z-index: 1000; /* 假如有其他元素在顶部需求掩盖,则可以运用 z-index */
}
</style>