CSS定位与层叠技巧-优快云博客

概述: 在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>

div定位和css的层叠