87,997
社区成员
发帖
与我相关
我的任务
分享请帮忙看一下图中DIV4的位置为什么这么奇怪
如图所示，右侧 的块4 为什么算在这么奇怪的位置，它不是应该在块3的下侧吗，为什么
跑到了块2的右侧？
以上图片代码如下：
5.html 代码如下
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#big-box{ width: 500px; height: 800px; border:1px solid #8a2be2; }
#a1 { width: 100px; height: 100px; background: aqua; }
#a2 {width: 200px; height: 200px; background:yellow; }
#a3 {width: 100px; height: 100px; background:red; }
#a4 {width:50px; height: 50px; background:pink; }
#a5 {width: 300px; height: 300px; background:peru; }
</style>
</head>
<body>
<div id="big-box">
<div id="a1">1</div>
<div id="a2">2</div>
<div id="a3">3</div>
<div id="a4">4</div>
<div id="a5">5</div>
</div>
</body>
</html>
4.html 代码 如下:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#big-box{ width: 500px; height: 800px; border:1px solid #8a2be2; }
#a1 { width: 100px; height: 100px; background: aqua; }
#a2 {width: 200px; height: 200px; background:yellow; position:relative; float: left;z-index:1;}
#a3 {width: 100px; height: 100px; background:red; z-index:4; }
#a4 {width:50px; height: 50px; background:pink; position:relative; float: left; }
#a5 {width: 300px; height: 300px; background:peru; }
</style>
</head>
<body>
<div id="big-box">
<div id="a1">1</div>
<div id="a2">2</div>
<div id="a3">3</div>
<div id="a4">4</div>
<div id="a5">5</div>
</div>
</body>
</html>
跑到了块2的右侧？
以上图片代码如下：
5.html 代码如下
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#big-box{ width: 500px; height: 800px; border:1px solid #8a2be2; }
#a1 { width: 100px; height: 100px; background: aqua; }
#a2 {width: 200px; height: 200px; background:yellow; }
#a3 {width: 100px; height: 100px; background:red; }
#a4 {width:50px; height: 50px; background:pink; }
#a5 {width: 300px; height: 300px; background:peru; }
</style>
</head>
<body>
<div id="big-box">
<div id="a1">1</div>
<div id="a2">2</div>
<div id="a3">3</div>
<div id="a4">4</div>
<div id="a5">5</div>
</div>
</body>
</html>
4.html 代码 如下:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#big-box{ width: 500px; height: 800px; border:1px solid #8a2be2; }
#a1 { width: 100px; height: 100px; background: aqua; }
#a2 {width: 200px; height: 200px; background:yellow; position:relative; float: left;z-index:1;}
#a3 {width: 100px; height: 100px; background:red; z-index:4; }
#a4 {width:50px; height: 50px; background:pink; position:relative; float: left; }
#a5 {width: 300px; height: 300px; background:peru; }
</style>
</head>
<body>
<div id="big-box">
<div id="a1">1</div>
<div id="a2">2</div>
<div id="a3">3</div>
<div id="a4">4</div>
<div id="a5">5</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
Hello World, 2021-04-07
- 打赏
- 举报
4确实是跟在3后面的，但由于2太大，把3的位置占了，4就只好跟在2旁边了，高度还在3的底端
weixin_53776260 2021-04-07
- 打赏
- 举报
不懂就问 type="text/css" 这是啥意思？
我爱小仙女 2021-04-07
- 打赏
- 举报
float 脱离文档流了，所以依上倒下，最下一层的顺序分别是1,3,5。
2紧跟1之后，盖在了3的上面
4紧跟3之后，但由于2太大，把3的位置占了，4就只好跟在2旁边了
泡泡鱼_ 2021-04-03
- 打赏
- 举报
另个贴子不是已经问了么……
你请问问题时描述完整，你完整的效果并没说
a1~a5的样式中，加入position: absolute;z-index:值;值越大，就浮在上面，想怎么弄怎么弄了。float去掉
