一.定位(position)
static:无定位的,一般我们是不需要注明的,因为默认就是static; relative:相对定位,是相对于自己的初始位置来定位的,位置发生偏移后,它的原始位置会被保留下来,如果要使用relative这个属性值,那么就要用到top bottom left right这四个属性值来确定元素的位置; absolute:绝对定位,能够很准确的将元素移动到指定位置,元素位置发生偏移后,原来的位置不会被保留; fixed:固定定位,性对浏览器窗口来定位,偏移量不会随滚动条的移动而移动;
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< style>
#first {
display : block;
background : deepskyblue;
position : static;
border : 1px darkgreen dashed;
}
#second {
display : block;
background : gold;
position : relative;
border : 1px darkmagenta dotted;
top : -20px;
left : 20px;
}
#third {
display : block;
background : cornflowerblue;
position : fixed;
border : aquamarine;
top : 50px;
left : 40px;
}
#forth {
display : block;
background : chartreuse;
position : absolute;
border : darkorange;
top : 30px;
left : 80px;
}
</ style>
</ head>
< body>
< div>
< div id = " first" > 第一个盒子</ div>
< div id = " second" > 第二个盒子</ div>
< div id = " third" > 第三个盒子</ div>
< div id = " forth" > 第四个盒子</ div>
</ div>
</ body>
</ html>
二. z-index属性
调整元素定位时重叠层的上下位置; z-index的属性值:整数,默认值是0; 设置了position属性时,z-index属性可以设置各元素之间的重叠高低关系; z-index值大的层位于其值小的层上方;
三. 网页元素透明度
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< style>
#first {
display : block;
background : deepskyblue;
position : static;
border : 1px darkgreen dashed;
}
#second {
opacity : 0.4;
display : block;
background : gold;
position : relative;
border : 1px darkmagenta dotted;
top : -20px;
left : 20px;
z-index : 80;
}
#third {
display : block;
background : cornflowerblue;
position : fixed;
border : aquamarine;
top : 50px;
left : 40px;
}
#forth {
display : block;
background : chartreuse;
position : absolute;
border : darkorange;
top : 30px;
left : 80px;
}
</ style>
</ head>
< body>
< div>
< div id = " first" > 第一个盒子</ div>
< div id = " second" > 第二个盒子</ div>
< div id = " third" > 第三个盒子</ div>
< div id = " forth" > 第四个盒子</ div>
</ div>
</ body>
</ html>