CSS的position主要有以下几个属性：static,relative,absolute,fixed,CSS3又增加了center | page | sticky，三个属性。对于css3大多数浏览器也都还不支持，也没怎么用到就不说了。至于position的了解，个人觉得首先应该先了解一下什么是块级元素，内联元素，以及内联块元素，然后再开始了解position属性在页面布局中的应用，以及影响。
三种元素类型的特点：
- 块级元素：在页面中独占一行，可以设置元素的高度，宽度
- 内联元素：不独占一行，多个内联元素可以在同一行中，直到这一行的的宽度无法继续容下内联元素位置。不能设置元素的宽度，高度。
- 内联块：介于以上两者之间，在内联元素的特性上改变了可以设置元素的快读与高度。
Position属性：
- Static：默认属性，按标准文档流布局，（标准文档流布局方式，从上到下，从左到右，结合元素的特性，块级元素？内联元素？等一行行的从上到下渐渐占位，每行之内又是从左到右逐渐占位）
- Relative：设置该属性的元素，依旧占据着其原本在标准文档流中的位置，但可以通过top,left等属性进行位置的偏移,偏移的位置是相对于元素原本在标准文档流中所占的位置而言
- Absolute:设置该属性的元素脱离了标准文档流，即在标准文档流中不占位，其位置是相对于其第一个设置了position属性的祖先而言（static这个默认属性除外，即设置为static属性也视为没有设置），同时需要注意的是，如果设置了absolute属性的元素，没有设置top，left等属性，此时的元素虽然脱离了文档流但是其位置却是在其父元素的左上角，而不是在设置了position属性的祖先元素的左上角，当时有top，left等属性的时候，变成了先对与第一个设置了position属性的祖先元素的的先对位置，可以自己稍微用html文档演示一下：以下有个截图
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.box1{
height: 500px;
width: 500px;
background-color: #fff;
border: solid 1px #ccc;
position: relative;
}
.box2{
height: 200px;
width: 200px;
margin-top: 50px;
margin-left: 50px;
background-color: blue;
}
.box3{
height: 100px;
width: 100px;
background-color: #ccc;
position: absolute;
top: 0;
}
.box4{
height: 100px;
width: 100px;
background-color: yellow;
/*position: absolute;*/
/*top: 0;*/
/*float: right;*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
</body>
</html>
- Fixed：Fixed属性跟absolute属性的性质基本是一样的，不同点再于fixed属性的位置是想对于window窗口而言的而不是相对于其设置了position属性的父元素而言。常见的用法是用来固定导航以及页脚。
当position转角遇到display、margin collapse、overflow、float这些特性时？
- 如果元素的display为none,那么元素不被渲染,position,float不起作用；
- 如果元素拥有position:absolute;或者position:fixed;属性那么元素将为绝对定位,float不起作用
- 如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.
- 有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.
附加：
- 设置了float的元素会表现出inline-block元素的特性
image.png
image.png
- 当float和position:absolute被同时设置时，后设置的会在更上层
FastStoneEditor1.png
FastStoneEditor1.png
网友评论