web前段基础5

position:relative ;

相对定位

特点:

  (1)不影响元素本身的特性;

(2)不影响元素脱离文档流

(3)如果没有定位偏移量,对元素本身没有任何影响。

定位元素位置控制:

top/right/bottom/left  定位元素偏移量。

position:absolute;//绝对定位

(1)使元素脱离文档流

(2)使内嵌元素支持宽高

扫描二维码关注公众号,回复: 4038301 查看本文章

(3)块属性标签内容撑开宽度

(4)如果有定位父级相对于定位父级发生偏移,如果没有定位父级相对于整个文档发生偏移。

(5)相对定位一般都是配合绝对定位使用。

定位元素层级默认后者层级高于前者

z-index  :[number];定位层级。

body<html<文档;

绝对定位是相当于整个文档发生偏移的;

绝对定位会去找定位父级,然后根据定位父级发生偏移。

opacity:0.5;不透明度。值为0~1;(标准浏览器支持)

IE私有滤镜:filter:alpha(opacity=0~100);如:

filter:alpha(opacity=50);ie8及ie8以下都需要;

position:fixed;固定定位;

特性和绝对定位一样:但是固定定位始终是相当于整个文档进行定位的,不管其父级有没有定位。

ie6不支持固定定位;

position :static;定位的默认值;

position:inherit;从父级继承定位属性的值;

定位元素的问题:

(1)ie6下父级的overflow:hidden是包不住子级的相对定位的;

解决方法,让父级元素也变为定位元素;

(2)ie6下定位元素的父级宽高都为奇数,那么在ie6下定位元素的right和bottom都有一像素的偏差。

解决方法,让父级元素的宽高为偶数;

猜你喜欢

转载自blog.csdn.net/hy1308060113/article/details/82800831
今日推荐