wuliaonimei博客
随机文章
随机文章

position详解

时间:2015年05月07日  分类:php  标签:css,html,position  评论:0

定位标签:position

包含属性:relative(相对)

      absolute(绝对)

1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素"相对于"它的原始起点进行移动。(再一点,相对定 位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框)

相对定位:relative 没有脱离正常的文档流,被设置元素相对于其原始位置而进行定位,其原始占位信息仍存在。所以可以使用text-align 等对齐css。

2.position:absolute; 表示绝对定位,位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关,所以它们可以覆盖 页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。)

绝对定位:ablution 脱离了文档流与浮动模型,独立于其他对象而存在,没有占位。

3.父容器使用定位属性后,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父窗口左上角



下面具体案例说明:

(1)

09C0B`CRS972{Z@K6LKZK%P.png7E071@{968~B9A}GX3J[I3A.png

没有使用任何定位css ,所以相对于浏览器左上角进行定位

(2)

X2@BXH_L}{Z`E8X$`Z4VA9A.png

父元素使用相对定位,所以子元素的绝对定位是相对于父元素进行定位的,且没有脱离标准文档流。


(3)

ZS~(KG4SD1VKFZ@K~WG4K)F.png

如图 div1脱离标准文档流 div11子元素还是相对于父元素进行定位。

div2占用了原先div1的位置。


评论列表

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail

Copyright ©2014-2015 Develop by Skilly. Go to the Top