来控制
.div1{z-index:10}
.div2{z-index:15}
按照数值的大小，从上往下重叠。
数值小的在下方，数值大的在上方。上面的代码就是div2在div1的上方
<!DOCTYPE HTML><html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ThreeDoor</title>
<style type="text/css">
* {
margin: 0
padding: 0
outline: 0
vertical-align: baseline
}
body {
overflow: hidden
}
div {
height: 500px
text-align: center
line-height: 500px
margin: auto
cursor: pointer
border: 1px solid black
top: 0px
font-size: 100px
color: red
}
div.center {
width: 300px
background-color: blue
}
div.left,div.right {
position: absolute
display: none
}
div.left {
float: left
background-color: orange
}
div.right {
float: left
background-color: yellow
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()
{
var doms = init ()
var center = doms[1], left = doms[0], right = doms[2]
var width = center.width()
center.hover (function ()
{
left.show ().stop ().animate (
{
width : width + "px"
}, "slow")
right.show ().stop ().animate (
{
width : width + "px"
}, "slow")
}, function ()
{
left.stop ().animate (
{
width : "0px"
}, "slow", function ()
{
left.hide ()
})
right.stop ().animate (
{
width : "0px"
}, "slow", function ()
{
right.hide ()
})
})
})
$(window).resize (function ()
{
init ()
})
var init = function ()
{
var sw = screen.availWidth, sh = screen.availHeight
var left = $ ("div.left").height(sh + "px"),
center = $ ("div.center").height(sh + "px"),
right = $ ("div.right").height(sh + "px")
center.width (sw / 3 + "px")
var w = center.prop ("offsetLeft")
var width = sw / 3
left.css ("right", width + w + "px")
right.css ("left", width + w + "px")
return [left, center, right]
}
</script>
</head>
<body>
<div class="left">福</div>
<div class="center">禄</div>
<div class="right">寿</div>
</body>
</html>
给两个相邻的div分别设置margin-bottom:20px和margin-top25px然后你会发现两个div之间的间距不是45px而是25px 这就是重叠了。
两个相邻div中间的margin 取最大值。如果想解决这个问题，给其中一个div加一个border或者padding就好了
