老师，我的代码实现了效果图，但是我都是懵的。具体问题请看下面代码后面，希望老师不嫌麻烦，帮我解答一下
来源：2-7 编程练习
郭永青
2019-12-17 23:12:48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.blue{
width: 100px;
height: 100px;
background: blue;
/*float:left;*/
position:relative;
top:50px;
left:50px;
/*z-index:10;*/
}
.red{
width: 100px;
height: 100px;
background: red;
/* float:left;*/
/*position:relative;*/
/*top:50px;*/
/*left:50px;*/
/*z-index:10;*/
}
</style>
</head>
<body>
<div class="blue"></div>
<div class="red"></div>
</body>
</html>
问题1：就是实现这个效果为什么浮动不行？
问题2：在这种情况下，什么时候该用浮动？
问题3：相对定位的属性，与浮动有什么关联？
问题4：z-index是什么属性，什么情况下使用，怎么使用？
问题有点多，麻烦老师了
1回答
-
1、emmm，浮动的话不是脱离了文档流了吗，蓝色一脱离，原位置就变成红色了，那个效果你应该看过吧。
2、浮动，一般就是为了把一堆块级元素放在一排，排排坐。。。
3、相对定位会在原文档流中留出位置，视频里说的很形象了，混不下去可以回去。。。使用的话，有句话叫做子绝父相。。百度一下，你就知道[滑稽]
4、z-index是控制层叠关系的，空间坐标系了解吧，想象一下你的电脑窗口平面中包含着X、Y轴，那Z轴是不是就是指向你的？所以Z说的是层叠关系，就是谁盖在谁上面。w3c上的定义：z-index 属性设置元素的堆叠顺序。
0
相似问题