CSS position 属性
1.static（静态） 描述：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2.relative（相对） 描述：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
实例：
<!DOCTYPE html><html lang="en"> <meta charset="UTF-8"> <title>Title div{margin:2px; width:200px; height:200px; background-color:blue; }#a{background-color:red; position:relative; left:350px; top:50px; }#b{position:relative; bottom:40px; }<div id="a">xiao<div id="b">cctv<html>
3.absolute（绝对）
描述：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
实例：
<!DOCTYPE html><html lang="en"> <meta charset="UTF-8"> <title>Title #a{margin:20px; position:relative; background-color:red; width:300px; height:300px; }#b{position:absolute; background-color:blue; width:200px; height:200px; top:10px; left:10px; }#c{position:absolute; top:10px; background-color:yellow; width:100px; height:100px; }<div id="a"> <div id="b"> <div id="c"></html>
4.fixed（固定）
简述：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
实例：
</html>```
网友评论