CSS元素的定位position

CSS元素的定位position

属性position

 

 

描述

absolute             

              

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。(父元素指的是前一个以absoluterelative宣告其位置的元素,若之前都没有此定位的元素存在,则以元素所在的窗口最大可视范围边界为基点。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成固定定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位,即按照元素的原始位置对该元素进行移动。(在正常文档流中偏移)

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

inherit

规定应该从父元素继承 position 属性的值。

 

下面再具体区别一下

 

 

 

相对定位

relative

绝对定位

absolute

定位基准

以它自己原来的位置为基准

以距离它最近的设置了定位属性的父级元素为定位基准,若它所有的父元素都没设置定位属性,则以浏览器窗口为定位基准

原来的位置

还占用着原来的位置,未脱离标准流

不占用其原来的位置,已经脱离标准流,其它元素就当它不存在一样。所以他会和他所在位置一样的元素重叠。

 

绝对定位的应用:

绝对定位的特点是脱离了标准流,所以不占据网页中的位置,而是浮在网页上,利用这个特点,绝对定位可以制作漂浮广告,弹出菜单等浮动在网页上的元素。如果 希望绝对定位元素以它的父元素为定位基准,则需要对它的父元素设置定位属性(一般是设置为相对定位),使它的父元素成为包含框,这就是绝对定位和相对定位 的配合使用。这样就可以制作出缺角的导航条、小提示窗口或下拉菜单了

固定定位作用:

可以做随窗口移动的广告和网页皮肤。

总结

css中元素的定位什么时候需要性对定位,什么时候用固定?什么时候需要绝对定位?还有浮动?

默认定位(即不加任何定位),通过margin,padding就能满足大部分要求;

当要使元素进行奇怪的偏移时,就用相对;

当要使元素独立于页面进行定位时,就用绝对;

当要使块级元素同行显示时,就用浮动

当元素相对于窗口不变就用固定;

有的情况下结合使用如relativeabsolute

[转载]CSS元素的定位position,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。