定位:
定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
通过position属性来设置元素的定位
可选值:
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位(也是绝对定位的一种)
当定位开启后,偏移量才好使
当开启了元素的定位以后,不设置偏移量时,元素不会发生任何变化
偏移量一般设2个:水平的一个与垂直的一个
偏移量相对于元素在文档流中原来的位置进行定位 :
left:元素相对于其定位位置的左侧偏移量
right:元素相对于其定位位置的右侧偏移量
top:元素相对于其定位位置的上边的偏移量
bottom:元素相对于其定位位置下边的偏移量
一、 相对定位:
1、当position属性设置为relative时,则开启了元素的相对定位
2、相对定位开启后不会脱离文档流
3、相对定位是相对于元素在文档流中原来的位置进行定位
4、相对定位不会改变元素性质
5、相对定位会使元素提升一个层级
6、当开启了元素的相对定位以后,不设置偏移量时,元素不会发生任何变化
二、绝对定位:
1、当position属性值设置为absolute时,则开启了元素的绝对定位
2、开启绝对定位,会脱离文档流
3、绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的(如果子元素的绝对定位开启了,父元素的相对定位同时开启)
4、绝对定位相对于祖先元素开启定位,并且是离其最近的祖先元素;如果没有则会相对于浏览器窗口进行定位(绝大多数参照父亲元素定位)
5、绝对定位会改变元素的性质:
内联元素变成块元素
块元素的宽度和高度默认都被内容撑开
6、开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
7、绝对定位会使元素提升一个层级
三、固定定位:
1、当position属性设置fixed时,则开启了元素的固定定位
2、IE6不支持固定定位
3、固定定位会脱离文档流
4、参照屏幕定位
5、固定定位会改变元素的性质:
内联元素变成块元素
块元素的宽度和高度默认都被内容撑开
与固定定位不同点:
1、 固定定位永远都会相对于浏览器窗口进行定位
2、 固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动
元素层级:
z-index属性设置元素的层级
1、没有开启定位的元素不能使用z-index
开启定位,相对定位或是绝对定位任意一个都可以
兄弟层级:谁z-index高谁在上面
父子层级:子元素永远在上面,父元素永远在下面
数越大离“你”越近,越在上面
2、z-index指定一个正整数作为值,该值作为当前元素的层级,数越大、层级越高,越优先显示
3、如果定位元素的层级是一样,下边的元素会盖住上边的z-index属性用来设置元素的层级
设置元素的透明背景:opacity
opacity可以用来设置元素背景的透明(0-1之间的值):
0 表示完全透明
0.5 表示半透明
1 表示完全不透明
opacity属性在IE8及以下的浏览器中不支持
IE8及以下的浏览器需要使用filter:alpha(opacity=透明度);属性代替(I这种效果支持IE6,在IE Tester中无法测试)
透明度(0-100之间的值):
0 表示完全透明
50 半透明
100 表示完全不透明