CSS样式定位_综合

<html><head><title>CSS样式定位</title><!--定位：定义元素的位置--><!--定位有三种方式：普通流（默认），绝对定位，相对定位--><style type="text/css">/*绝对定位：以网页坐标系为基准进行定位*/#box-abs{position:absolute;left:100px;top:100px;border:1px dashed red;}</style><style type="text/css">/*相对定位：相对元素原始的位置定位*/.pos{position:relative;left:200px;top:50px;}.pos-left{position:relative;left:500px;}.pos-top{position:relative;top:-100px;}</style><style type="text/css">/*z-index属性：值越小，越靠近底部，可以是负数，默认值为0*//*要想使用z-index属性必须使用postion:absolute/relative/fixed三个属性之一。*/.box1{position:absolute;left:500px;top:500px;z-index:1;width:300px;height:150px;border:1px solid black;margin-top:20px;background-color:red;}.box2{position:absolute;left:550px;top:550px;z-index:2;width:300px;height:150px;border:1px solid black;margin-top:20px;background-color:yellow;}	.box3{position:absolute;left:600px;top:600px;z-index:3;width:300px;height:150px;border:1px solid black;margin-top:20px;background-color:blue;}	</style></head><body><p id="box-abs">获取，理解，拓展，应用，纠错</p><br><br><br><br><h2>1标题</h2><h2 class="pos">2标题左下移动</h2><h2 class="pos-left">3标题向左移动</h2><h2 class="pos-top">4向上移动</h2><br><br><br><br><h1 class="box1">标题一</h1><h1 class="box2">标题二</h1><h1 class="box3">标题三</h1></body>
</html>