前端基础：本案例中，为什么小盒子没有显示出来
本帖最后由 clearwater 于 2019-12-22 20:29 编辑在看某马的前端教程，遇到一个不同的地方，请大神赐教一下。
这小节讲的是Position。
老师讲解一共有两个大盒子，up 盒子，和 down 盒子。 而在up盒子里面，左边和右边各方一个小盒子，当箭头。
我现在听不明白的不是position,而是为什么以下代码中左边的小盒子（purple) 在实际的效果中，并没有显示出来，要到chrome的检查中查看才能出来。
这里的up 盒子， down 盒子， arr-l盒子，此时都是标准流。标准流，块级的元素是要各占一行的，为什么这里这个小盒子在实际中不见了，原因是什么。
我的意思是：
一行：图片
二行：arr-l
三行：down盒子
链接: https://pan.baidu.com/s/1O8L541WhT77Rx1a9vAUqlA 提取码: iz3b （这是相关的视频。如果您看不懂，我在说什么）
以下是视频的截图和我自己跟着视频的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.up {
width: 1000px;
height: 90px;
background-color: pink;
}
.down {
width: 1000px;
height: 150px;
background-color: #000;
}
.arr-l {
width: 40px;
height: 40px;
background-color: purple;
}
</style>
</head>
<body>
<div class="up">
<img src="img.jpg" alt="">
<div class="arr-l"></div>
</div>
<div class="down"></div>
</body>
</html> 因为它被放在<div class="up">里面呀，所以被up盒子给挡住了。<div class="arr-l">在up的后面，你可以加个z-index把它调到up的上面就可以显示了。 H_Kali 发表于 2019-12-22 19:56
因为它被放在里面呀，所以被up盒子给挡住了。在up的后面，你可以加个z-index把它调到up的上面就可以显示了 ...
谢谢大神。不过我还是没真正懂，能不能再讲讲？
不是都是标准流吗？各占一行？被什么会被up盒子挡住？
是被图片挡住了吗？
[
－－－－图片－－－
－－－－小盒子－－－
] 你换一个浏览器试试看，我运行是可见的。 我复制下观察是正确的 楼主换个浏览器？ 本帖最后由 H_Kali 于 2019-12-22 20:10 编辑
<div class="up">
<img src="img.jpg" alt="">
</div>
<div class="arr-l"></div>
应该这样才是各占一行吧
[
－－－－图片－－－
－－－－小盒子－－－
]
H_Kali 发表于 2019-12-22 20:09
应该这样才是各占一行吧
[
－－－－图片－－－
感谢您的热心帮助。
也感谢楼中各位热心回复的人。
我想明白了 复制楼主的代码到本地，发现purple小盒子在浏览器中是可以看到的{:301_1009:}，楼主换个浏览器试试吧，或者清理下浏览器缓存。 H_Kali 发表于 2019-12-22 20:32
复制楼主的代码到本地，发现purple小盒子在浏览器中是可以看到的，楼主换个浏览器试试吧，或者 ...
我用chrome 和遨游都不可见。
另外视频中老师的讲解中，purple也不可见。
您用的是什么浏览器？ clearwater 发表于 2019-12-22 20:35
我用chrome 和遨游都不可见。
另外视频中老师的讲解中，purple也不可见。
Chrome 79.0.3945.88
页:
[1]
2