网页CSS元素浮动的层次顺序问题。
例如两个浮动的DIV，分别为大DIV1，小DIV2，它们两个都浮动了，怎么能让小DIV2浮动在大DIV1的上面？顺序是怎么定的呢？...
例如两个浮动的DIV，分别为大DIV1，小DIV2，它们两个都浮动了，怎么能让小DIV2浮动在大DIV1的上面？顺序是怎么定的呢？
展开
3个回答
推荐于2018-04-15 · 知道合伙人数码行家
huanglenzhi
知道合伙人数码行家
采纳数：117538
获赞数：517188
长期从事计算机组装，维护，网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。
向TA提问 私信TA
关注
![]()
展开全部
层级关系的布局有两种解决方法：
一种方法是使用标签的自然顺序和嵌套顺序来形成合理的布局。
而第一种方法却不是万能的，有时候我们需要将原本位于下层的元素移到另一个元素上方，那可以使用z-index；
当你定义的CSS中有position属性值为absolute、relative或fixed，
用z-index此取值方可生效。
此属性参数值越大，则被层叠在最上面。
例子：
<html>
<head>
<style>
.z1,.z2,.z3{position:absolute;width:200px;height:100px;padding:5px 10px;color:#fff;text-align:right;}
.z1{z-index:1;background:#000;}
.z2{z-index:2;top:30px;left:30px;background:#C00;}
.z3{z-index:3;top:60px;left:60px;background:#999;}
</style>
</head>
<body>
<div class="z1">z-index:1</div>
<div class="z2">z-index:2</div>
<div class="z3">z-index:3</div>
</body>
</html>
上面三个CSS，将根据z-index的值决定谁在最上层！
一种方法是使用标签的自然顺序和嵌套顺序来形成合理的布局。
而第一种方法却不是万能的，有时候我们需要将原本位于下层的元素移到另一个元素上方，那可以使用z-index；
当你定义的CSS中有position属性值为absolute、relative或fixed，
用z-index此取值方可生效。
此属性参数值越大，则被层叠在最上面。
例子：
<html>
<head>
<style>
.z1,.z2,.z3{position:absolute;width:200px;height:100px;padding:5px 10px;color:#fff;text-align:right;}
.z1{z-index:1;background:#000;}
.z2{z-index:2;top:30px;left:30px;background:#C00;}
.z3{z-index:3;top:60px;left:60px;background:#999;}
</style>
</head>
<body>
<div class="z1">z-index:1</div>
<div class="z2">z-index:2</div>
<div class="z3">z-index:3</div>
</body>
</html>
上面三个CSS，将根据z-index的值决定谁在最上层！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
相对定位的特点就是占着马桶不拉屎，就是说它相对它本来的位置偏离了一定距离以后，它去了别的地方，但是它原来待的地方也是不会让出来的，你3个div浮动以后，就变成了图1的样子，那么3个div自己的位置已经确定，那么不管是div1也好，其他div也好，用相对定位跑到隔壁家去玩也好，跑到天涯海角也好，它家里的位置还是占着不让别人去的，仿佛它不曾离开。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
div1{ position:relative; width:100px; height:100px;}
div2{ position:absolute; left:10px; top:10px; width:50px; height:50px;background:#0fc;}
小div置于div1之上，如果不显示的话可以用z-index：10
div2{ position:absolute; left:10px; top:10px; width:50px; height:50px;background:#0fc;}
小div置于div1之上，如果不显示的话可以用z-index：10
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
