CSS的position定位详解
·
目录
1.定义
position是CSS中的一个属性，可以灵活地改变盒子在页面中的位置。position有五种属性：static、relative、absolute、fixed、sticky。
2.static(默认定位)
2.1 含义
static是position的一个默认值，当使用static属性时，元素按正常文档流的位置进行排列，且top、left、bottom、right属性不生效。
2.2 代码示例
<style>
div {
......
/* 此时div的position默认为static ,下述代码不生效*/
top:50%;
}
</style>
<div>
<div>....</div>
</div>3.relative(相对定位)
3.1 含义
relative是相对定位，元素相对其正常的位置进行定位，并且元素仍占据原本在文档流的位置，此时top、left、bottom、right属性生效。
3.2 代码示例
<style>
div {
......
/* 此时元素向下移动20px，但是其在文档流的占位依旧不变，只是视觉上下移了20px*/
position: relative;
top:20px;
}
</style>
<div>
<div>....</div>
</div>4. absolute(绝对定位)
4.1 含义
absolute绝对定位，元素被移除文档流，该元素相对其最近的已定位的祖先元素进行定位，若没有找到已定位的祖先元素，则相对于窗口进行定位。
4.2 代码示例
/* 此时父盒子为相对定位，子盒子为绝对定位，子绝父相，子盒子在父盒子中进行定位 */
<style>
.parent{
.....
position: relative; /* 关键：成为已定位的祖先元素/
}
.child{
....
position: absolute; /* 绝对定位 */
right: 10px;
bottom: 10px; /* 贴在父盒子的右下角 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>5. fixed(固定定位)
5.1 含义
fixed固定定位，元素相对于视口(页面中的可视区域)进行定位，即使页面滚动，元素也会固定在对应的位置。
5.2 代码示例
<style>
.navbar{
position: fixed;
left: 0; top: 0; /* 导航栏贴在视口顶部 */
width: 100%; height: 60px;
}
.content{ height: 200vh; padding: 20px; }
</style>
</head>
<body>
<nav class="navbar">顶部导航栏（fixed）</nav>
<div class="content">
往下滚动，导航栏始终固定在视口顶部。
</div>
</body>
</html>6. sticky(粘性定位)
6.1 含义
sticky粘性定位，为元素设定一个阈值，使元素在relative相对定位和fixed固定定位中进行切换。即用户的滚动行为跨过阈值时，元素会从relative相对定位变为fixed固定定位。
6.2 代码示例
<style>
.bar{
background: #2196F3;
color: #fff;
padding: 12px;
position: sticky;
top: 0; /* 滚到顶部时，到达阈值top为0的要求，盒子在顶部粘住 */
}
body{ margin: 0; }
.space{ height: 200vh; padding: 0 20px; }
</style>
</head>
<body>
<div class="space">
<p>往下滚动↓</p>
<div class="bar">我会粘在顶部</div>
<p>继续滚动，上面那条蓝条会一直保持置顶。</p>
</div>
</body>
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
27
0- 0
已为社区贡献1条内容
所有评论(0)