absolute | 相对于非static的最靠近的祖先元素进行定位。会忽略eft、top、right、bottom和z-index属性,只有margin起作用 |
relative | 相对于自己在正常文档流的位置进行定位。margin+top一起起作用 |
fixed | 相对于浏览器窗口进行定位。元素未滚动,在当前可视区域他的top值不生效,只有margin生效,滚动起来后margin失效,top值生效 |
static | 采用正常文档流定位(默认)。margin+top一起起作用 |
说明:非static元素的位置需要采用样式属性top、left、bottom、right进行设置,取值可为负值。这四个样式属性对static不起作用。
- absolute
当定位元素的包含块都是static时,其相对于初始包含块(html的包含块/整个html网页)定位
<html>
<head>
<style type="text/css">
html{
background-color:red;
border:solid 1px black;
margin:20px 40px;
}
body{
background-color:blue;
border:solid 1px black;
margin:20px 40px;
}
div{
background-color:black;
border:solid 1px black;
margin:50px 50px;
height:2000px;
}
h2{
position:absolute;
background-color:green;
left:0px;
top:0px;
}
</style>
</head>
<body>
<div>
<h2>position-absolute</h2>
</div>
</body>
</html>
-------------------------------------小插曲----------------------------------------------------------------
因为好奇初始包含块和html的关系,所以分别设了html和body的border、margin、和background-color。
结果如下:
从下图看html设了margin后border不和视口(viewport)重合,但其背景颜色并不只是在border以内,而是填满整个网页。
当去掉html的样式属性,则body的背景颜色也是填满整个网页,而不是在border以内。
------------------------------------------小插曲结束-------------------------------------------------------
绝对定位元素随网页滚动而滚动
当绝对定位元素的最近包含块div设为relative时,该绝对定位元素相对于div定位
- relative
<div>
<h2 id="normal">position-absolute</h2>
<h2 id="toright">position-absolute</h2>
<h2 id="toleft">position-absolute</h2>
</div>
h2{
background-color:green;
}
#toleft{
position:relative;
left:-20px;
}
#toright{
position:relative;
left:20px;
}
- fixed
相对于浏览器窗口固定,不会随着网页的滚动而滚动,多用于广告之类。
- static
文档流的正常位置
例题:
以下代码,分别给节点 #box 增加如下样式,问节点 #box 距离 body 的上边距是多少?
<body style=”margin:0;padding:0”>
<div id=”box” style=”top:10px;margin:20px 10px;”>
</div>
</body>
如果设置 position: static ; 则上边距为 20 px
如果设置 position: relative ; 则上边距为 30 px
如果设置 position: absolute ; 则上边距为 30 px
如果设置 position: sticky ; 则滚动起来上边距为 10 px