一开始作者在刚入学的时候,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; }