1、定位有哪几种,有什么区别?
a)static定位(普通流定位),元素的默认定位方法。此时 top, right, bottom, left 和 z-index 属性无效。
b)float定位(浮动定位),取值为:left or right。float样式规则的元素是脱离文档流的,它的父元素的高度并不能有它撑开。因此若想要撑开父级元素,需要清除浮动。清除浮动的方法:
1)如果父级元素高度固定且已知,直接为父级元素设置高度即可。
2)在浮动元素后面多加一行代码,并添加css属性,clear:both 清除浮动。(会造成代码冗余)
3)为父元素设置属性overflow:hidden。(如果不想让子元素溢出隐藏,此方案不可行)
4):after。直接为父级元素添加:after属性,eg:
.parent:after{
content: ' ';
display: block;
claer: both;
}
c)relative定位(相对定位)。position:relative; 定位元素本身没有脱离文档流,相对于其正常位置进行定位,可以设置z-index。
d)absolute定位(绝对定位)。position:absolute; 定位元素本身脱离文档流,相对于其最近已定位的父元素。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。绝对定位元素的定位值发生冲突时的解决方法 如果同时指定 top 和 bottom(非 auto),优先采用 top。 如果同时指定 left 和 right,若 direction 为 ltr(英语、汉语等),则优先采用 left;若 direction 为 rtl(阿拉伯语、希伯来语等),则优先采用 right。
e)fixed(固定定位)。position:fixed;定位元素本身脱离文档流,相对于浏览器窗口进行定位。