这篇文章展示了CSS中不同定位属性的用法，包括static（静态/默认）、relative（相对/相对于默认位置）、fixed（固定/相对于视口定位）、absolute（绝对/相对于最近定位祖先元素）和sticky（粘性/根据用户滚动定位）。通过示例代码，解释了各种定位方式如何影响元素在页面上的布局和滚动行为。
定位一般就这个几个：static ；relative；fixed； absolute；sticky；
具体使用方式会如下 所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.possi {
position: relative;
height: 1080px;
}
.btn {
padding: 8px;
color: white;
background: darkblue;
border: 1px solid darkcyan;
border-radius: 3px;
}
.btn:hover {
background: sienna;
}
.stati {
position: static;
}
.relat {
position: relative;
left: 80px;
}
.fixs {
position: fixed;
right: 0;
bottom: 0;
}
.abso {
position: absolute;
top: 200px;
}
.stick {
position: sticky;
top: 0px;
left: 400px;
}
.tes {
width: 400px;
height: 200px;
text-align: left;
position: relative;
top: 200px;
left: 200px;
}
</style>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="possi">
<button class="btn stati">static<tag>静态/默认</tag></button>
<button class="btn relat">relative<tag>相对/相对于默认的位置</tag></button>
<button class="btn fixs">fixed<tag>固定/相对于视口定位，即使这意味着即使滚动页面，它也始终位于同一位置</tag></button>
<button class="btn abso">absolute<tag>绝对/相对于最近的定位祖先元素进行定位</tag></button>
<button class="btn stick">sticky<tag>粘性/根据用户的滚动位置进行定位</tag></button>
<p class="tes">
position: absolute;
如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
注意：“被定位的”元素是其位置除 static 以外的任何元素。
</p>
</div>
</body>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
