补上一些学习笔记,内容不多也算是做一个总结(目前正在努力学习前端、查缺补漏)
本篇文章主要谈谈自己对于Css定位的理解
本篇文章讲解相对定位,为单独一篇详细讲解
往期
主篇章
固定定位(fixed)
相对于浏览器固定某个元素不随着滚动条的滚动而滚动
固定定位是脱离标准流的(脱标)
相对于浏览器固定某个元素不随着滚动条的滚动而滚动
例子代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 400px;
height: 400px;
background-color: skyblue;
}
.b {
width: 200px;
height: 200px;
background-color: seagreen;
}
.fixed {
width: 300px;
height: 300px;
background-color: springgreen;
/* 固定定位 */
position: fixed;
/* 偏移 */
left: 600px;
top: 0px;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
运行结果(之所以四周有一点点小偏移是因为没有清除元素的内外边距,下同!):
此处没有用动图展示,实际效果可以去自己运行跑一下!
验证固定定位是脱离标准流的(脱标)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 400px;
height: 400px;
background-color: skyblue;
}
.b {
width: 200px;
height: 200px;
background-color: seagreen;
}
.fixed {
width: 300px;
height: 300px;
background-color: springgreen;
/* 固定定位 */
position: fixed;
/* 偏移 */
top: 20px;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
运行结果(之所以四周有一点点小偏移是因为没有清除元素的内外边距,下同!):
粘性定位(sticky)
较为少用,有些类似于固定定位,下面仅做一个代码实例,有需要的朋友可以复制粘贴自己跑一下,不再过多做笔记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sticky {
width: 300px;
height: 300px;
background-color: springgreen;
margin: 300px auto;
/* 固定定位 */
position: sticky;
/* 偏移 */
top: 0;
}
</style>
</head>
<body>
<div class="sticky"></div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</body>
</html>
效果就是当滚动条下滑时,绿色矩形距离顶部为0时固定不动
运行结果(之所以四周有一点点小偏移是因为没有清除元素的内外边距):
此处没有用动图展示,实际效果可以去自己运行跑一下!