CSS中元素定位需要理解清除下列属性：
float;
position: absolute;
position: relative;
有两种方式可以比较熟练的使用：
第一种是拥有非常丰富的经验，可以不用去仔细思考，条件反射般使用。
第二种是从本质上理解，即使用该属性后，浏览器是如何render这种效果，理解的基础上才可以准确使用。
1. float;
此属性使用非常广泛。理解它需要一些预备知识：
1）inline元素的flow:浏览器将按照从左到右，由上往下的顺排列inline元素。当浏览器大小变化时，inline元素的位置会随之变化，右侧的元素会被“挤”到下一行的最左端其后元素依次后移
2）block元素flow：浏览器将由上往下依次放置block元素，每个元素一行，然后换行。
当浏览器render页面时，按照上面的规则放置元素，如果遇到float:right，则将该元素从当前的页面中移除，并放置在最后端。其后的元素则会填补该元素被移除后的空间。（这样就相当于该元素漂浮于当前页面，这可能就是使用float的原因）。虽然后续元素会占用该元素空间，但是其inline元素会沿着该float元素的border排列,而不会重叠。
2. position: absolute;
这个属性使浏览器将该元素从正常的Document Flow中移除，也就是它将不会再占用空间，不会影响其他的任何元素。而本身的定位是相对于父纪节点的绝对定位，并通过TRBL属性来设定。
- 父级节点没有设定position，或为fix时，将相对于窗口定位；
- 父级节点设定为ablolute或者relative时，相对于父节点定位；
- TRBL设定的值是该元素的实际绝对位置。
- 当父节点没有设定position，并且也没有设定TRBL属性时，默认相对于该元素在没有使用absolute时的位置定位。可以看到图中marign和padding都是相对于原先应该在的位置，同时div3的位置是假设div2不存在时应该在的位置，也就是说这时div2已经从该页面的Document Flow中移除。
3. position: relative
此属性大多应用的场景是设定父容器，这样里面的元素如果使用absolute，将相对于此容器作为基准。
与absolute不同，relative将占用空间，它会保留本应存在的空间，其他正常的元素将不能再使用该空间。在此基础上，它可以使元素进行移动，在移动时对其他元素将不再有影响。
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
