CSS position属性:
static——默认方式,形成文档流
relative——相对于原来(普通流)的位置进行偏移
演示地址:点击打开链接
absolute——脱离原来的文档流,独立定位,display属性变成block,可能覆盖其他成分。
演示地址:点击打开链接
fixed——固定定位,定位坐标系是整个视窗,网页下拉时保持不动
演示地址:点击打开链接(请在全屏下查看演示)
知识点补充
1. 设置了浮动的元素也脱离普通的文档流(同absolute),进入浮动流空间(里面是所有设置了浮动的元素),故可能与普通文档流中元素发生重叠覆盖。
演示地址:点击打开链接
注:经测试,浮动的div可以覆盖普通文档流中的div,但是对于文本则不会覆盖,而是会产生文字环绕效果(行框围绕浮动框)。
2.margin-left和left两种位移方式
机制:
margin-left——通过设置元素的外边距来达到位移的效果
left——相对于最近的父对象进行定位,常与position:absolute联用进行绝对定位
效果:
position:relative时,两种方式效果相同,都是以父元素为基准
position:absolute时,由于元素脱离文档流,left此时以浏览器窗口为基准,使绝对定位生效;而margin_left仍是以父元素为基准。
转载请注明原文地址: https://ju.6miu.com/read-677257.html