CSS-position系列属性
<pre>
CSS-position系列属性总结,写记下来,希望对大家有帮助,供新人学习,老人查阅,共勉。
------DanlV
</pre>
position属性一般分为三个方面:相对定位(position:relative)、绝对定位(position:absulote)、固定定位(position:fixed)。下面具体来写这三种的特点及其用法。
相对定位position:relative
什么是相对定位?
相对定位是根据自己原来的位置来进行移动定位。
相对定位的特性
1.微调元素,相对于自己原来的位置移动,位移通过设置方向left right top bottom的值来进行移动
2.不脱标,形影分离,身体留在原本位置(本体看不见但还是占有位置),影子移动
不脱标:不脱离标准文档流和标准文件流
相对定位常见用途
1.微调元素
2.做绝对定位的参考 -- 子绝父相 即:子元素采用绝对定位,父元素采用相对定位
绝对定位 position:absolute
什么是绝对定位?
根据参考元素来进行定位。
绝对定位的特性
1.根据参考点来进行位移
- 位移通过设置方向left right top bottom的值来进行移动
- 参考点
--- 绝对定位的元素没有父元素
--->绝对定位的参考点,如果用top描述,那么定位参考点就是
页面的左上角,而不是浏览器的左上角
--->如果使用bottom来描述,就是浏览器首屏窗口,左下角
--- 如果父级有定位属性
--->就以父级为参考点,如果父级没有定位,就继续向上层去找
--->如果一个盒子设置了绝对定位,并且向一个方向上位移,那么与这个方向相同的padding值将会失效
2.绝对定位脱标 ,如果父元素没有相对定位,那么脱标带来的影响将无法解决。
TIPS:子元素采用绝对定位的话,所对应的参考系为父元素的定位,若父元素定位无,则向上寻到已定位的元素,根据此元素绝对定位。
绝对定位的盒子居中
1.绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。
2.居中:left:50%;margin-left:负的宽度的一半。
固定定位position:fixed
- 固定定位就是相对浏览器窗口定位。页面无论如何滚动,这个盒子显示位置不变
- 固定定位的盒子脱标
- 缺点:ie6不兼容
z-index
在定位的盒子两个之间产生覆盖时,造成一个盒子盖住另一个盒子的现象,可以设计z-index属性值来说设置优先级。
- z-index值表示谁压着谁。数值大的压盖住数值小的。
- 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。
- z-index值没有单位,就是一个正整数。默认的z-index值是0
- 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
- 从父现象:子元素的z-index值再大也打不过父元素,父元素之间的相互比较定级,子元素听从父元素的z-index的胜负。
网友评论