会使用position定位网页元素 会使用z-index属性调整定位元素的堆叠次序
position属性
static:默认值,没有定位
relative:相对定位
相对自身原来位置进行偏移 偏移设置:top、left、right、bottom(left-1向左移动1);原来的位置会被保留下来
相对定位一般情况下很少自己单独使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量
absolute:绝对定位(不设置偏移量)
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响 元素位置发生偏移后,它原来的位置不会被保留下来
fixed:固定定位
类似绝对定位,不过区别在于定位的基准不是祖先元素,而是浏览器窗口
浮动元素设置相对定位
//设置第二个盒子右浮动,再设置第一、第二盒子相对定位
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
position:relative;
right:20px;
bottom:20px;}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
float:right;
position:relative;
left:20px;
top:-20px;}
z-index属性
调整元素定位时重叠层的上下位置
z-index属性值:整数,默认值为0
大的在上
设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系
网页元素透明度
opacity:x | x值为0~1,值越小越透明 |
filter:alpha(opacity=x) | x值为0~100,值越小越透明 |