一开始作者在刚入学的时候，css的基本标签都知道差不多，但是有的时候给图片或者文字等样式的<div>定位的时候总是出错，最后了解了一下，原来是CSS有一个position定位的标签，并且定位有static、relative、fixed、absolute以及sticky五种方式，下面作者给大家讲讲这五种的区别。
1.static，静态定位，没有特殊的定位规则，遵循正常的文档流对象。（只定义《div》形状，位置不动，但是随着滚动条变化而变化）格式：
div.static {
position: static;
border: 10px solid #73AD21;
}
2.relative，相对定位，相对正常的位置而变化，适用于矩阵排版。格式：
h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }
3.fixed，元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：格式：
p.pos_fixed { position:fixed; top:30px; right:5px; }
4.absolute，绝对定位，对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:格式：
h1{ position:absolute; left:100px; top:150px; }
5.sticky ,基于用户的滚动位置来定位。格式：
div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
