css之定位笔记
定位有三种,分别是相对定位,绝对定位,固定定位.
1.相对定位;就是微调元素位置的,相对自己原来的位置,进行位置调整.
(1).相对自己定位.
(2).相对不脱标 ,实际上还在原来的位置.
相对定位的用途:
(1).微调元素;(2)做绝对定位的参考;
2.绝对定位
(1).脱离文档流;
(2).
绝对定位的参考点;
用top描述:
参考的是网页的左上角.不是浏览器的左上角.
用bottom描述:
参考的是浏览器首屏窗口尺寸,对应的页面的左下角.
以盒子为参考点;
如果父元素中出现了也定位的元素,那么将以父辈元素为参考点.
注意:不一定是相对定位,任何定位,都可以作为参考点.
绝对定位的儿子,无视参考的那个盒子的padding.以border内侧为参考点,进行定位.
绝对定位的盒子居中;
就是left:50%;margin-left:负的宽度的一半.
3.固定定位;
就是相对浏览器窗口的定位.
IE6不兼容;解决办法:
4.z-index
1.z-index值表示谁压着谁。数值大的压盖住数值小的
2.只有定位了的元素,才能有z-index值.不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。
3.z-index值没有单位,就是一个正整数。默认的z-index值是0。
- 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素
- 从父现象:父亲怂了,儿子再牛也没用。