本文通过实例解析CSS3中多个DIV盒子的叠加计算问题，探讨了盒子的原始坐标、高度和z-index如何影响其叠加效果。在变换过程中，发现盒子的叠加仅与其高度和前一个盒子的位置有关，而与左右平移无关。通过变换各个盒子的纵坐标，可以得出每个盒子的新坐标，从而实现盒子的空间堆放效果。
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible" content="IE=edge">
<metaname="viewport" content="width=device-width,initial-scale=1">
<title>DIV盒子叠加计算</title>
<styletype="text/css" media="screen">
div.outer{width:350px;height:350px;padding:0px;border:1pxsolid green;}
div.outerdiv{width:200px;height:200px;padding:0px;color:white;font-size:20px;position:relative;}
div.con1{background:red;top:0px;left:0px;z-index:99;}
div.con2{background:green;top:0px;left:0px;z-index:999;}
div.con3{background:blue;top:0px;left:0px;text-align:right;z-index:9;}
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
