? ? ? ? 概述: ?在web开发中相信最开始学习的时候,希望能将div放到我们希望放到的地方和窗体的层叠,看似简单的问题 对于我们这些菜鸟来说确实很困难的,下面就介绍窗体的定位和层叠
?
?
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 position 定义窗体的位置 相对位置和绝对位置
?
? ?
overflow 设置当元素的内容溢出其区域时发生的事情。 z-index:设置窗体的层 index越大层就在最上面,默认为0
?
?
overflow的属性;
?
visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
?
?
绝对定位; position:absolute ?
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>JS示例-首页</title>
<style type="text/css">
#zero{
border:1px #0000ff solid;
width:100%;
height:100%;
}
#first{
width:300px;
height:300px;
background:#ff0000;
position:absolute;
z-index:1;
top:30px;
left:30px;
}
#second{
width:300px;
height:300px;
background:#00ff00;
position:absolute;
z-index:1;
top:100px;
left:300px;
}
</style>
</head>
<body>
<div id="zero">
<div id="first"></div>
<div id="second"></div>
</div>
</body>
</html>
?
?
?
?
?
?
相对定位;position:relative
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>JS示例-首页</title>
<style type="text/css">
#zero{
border:1px #0000ff solid;
width:100%;
height:100%;
}
#first{
width:300px;
height:300px;
background:#ff0000;
position:relative;
z-index:1;
top:30px;
left:30px;
}
#second{
width:300px;
height:300px;
background:#00ff00;
position:relative;
z-index:1;
top:100px;
left:300px;
}
</style>
</head>
<body>
<div id="zero">
<div id="first"></div>
<div id="second"></div>
</div>
</body>
</html>
?
?
?
原文：http://baihe747.iteye.com/blog/2153864