Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Div+CSS > CSS中的position详解以及个人见解!
隐藏/显示侧边栏

CSS中的position详解以及个人见解!

2013-08-31 14:47    来源:http://www.cgner.com    责任编辑:admin    字号【
下面的表哥是来自w3cschool的!已经清楚的说明了CSS position的用法!
CSS之position用法全解

下面进行深入理解:::
static是默认的值,忽略top,bottom,left,right和z-index .这就是为什么没有设置position的情况下z-index不起作用的原因了。设置个positon:relative也可以的。
fixed:则是相对于浏览器而言了,要设置元素随着浏览器滚动而滚动就是设置这个属性了。
inherit:继承父元素,具体可以参照w3c school..
下面具体讲relative和absolute的区别了。最好能自己做实验进行理解!!!只做文字说明!其中意思可以做实验来印证。  [cgner.com]

relative:相对定位就是相对于原先没有设置的时候应该存在的位置。注意这个属性的特点就是:它是 相对于自己本身应该在的位置发生移动,而不影响其他元素。注意其它元素不会受到它的任何影响。该怎么放怎么放。这个就是所谓的”相对了“。。。注意原来的空间,还是会暂居的。及时你跑到哪儿去了,也会空在那。

absolute:绝对定位如果网页上你设置的元素的所有父元素均没设置position(不包含static),那么这个position就是相对于整个窗口的。此时类似fixed的效果了。absolute不是相对浏览器窗口定位,是相对最近的有 position 属性设定(不包括 static 值)的祖先元素进行定位,如果其所有祖先元素均没有设置position的话,那就和 fixed 的效果一样了。可以把position理解为脱离了正常流,所以它的原来的空间也不存在了。会被其他元素占据。

*注意*:这里要理解position:”相对于最近的position设定的祖先元素进行定位“。假如你要让某个子元素相对于他的父元素定位,并且子元素的原来的空间不再占据。此时可以让父元素 position:relative;子元素:positon:absolute; 即可。。。

更多
Tags 标签:
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |