层模型三种基本定位：
1、绝对定位（position：absolute）
2、相对定位（position：relative）
3、固定定位（position：fixed）
绝对定位：
参照的是(body或经过的处理)元素的左上角
绝对定位不占位置
相对定位：
会有一个参照物(一般是该元素的上一个元素–普通)
固定定位：
写在哪就在哪 不会变
有4个元素可以设置标签的位置：left/right/top/bottom 可以通过调节这4个值的大小来确定标签的位置
z-index：z-index 定义层数 只有配合定位position 才能使用； 999表示最顶层 也可以写9/99/999/9999/99999…；-1 表示在底层的下面(这个时候这个层是不能被选中的)
注意：
如果2个层数相同，那么那个元素写在下面，那么显示的时候就在上面
使用定位之后要设置top…的元素的值，否则可能没有效果
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层模型</title>
<style type="text/css">
div{
width: 100%;
height: 500px;
}
div:nth-child(2n){
background-color: #4CC971;
}
p{
width: 100px;
height: 45px;
position: fixed;
right: 20px;
top: 50%;
background-color: red;
/* z-index 定义层数 只有配合定位position 才能使用
在这里 999表示最顶层 也可以写9/99/999/9999/99999...
-1 表示在底层的下面(这个时候这个层是不能被选中的)
*/
z-index: 999;
}
.img1{
/* 注意我们采用坐标的方式来进行定位--x(top),y(left)
网页的左上角是0,0点
*/
/* 不占位置 */
position: absolute;
top: 30px;
left: 20px;
z-index: 4;
}
.img2{
position: relative;
top: 0px;
left: 0px;
z-index: 5;
}
</style>
</head>
<body>
<div>
<span>1</span>
<img src="../img/house.png" alt="图片" class="img1">
<img src="../img/house.png" alt="图片2" class="img2">
</div>
<div>2</div>
<div>3</div>
<p>固定定位</p>
</body>
</html>
4938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
