定位

最新推荐文章于 2024-06-23 18:52:49 发布

傻月菇凉

最新推荐文章于 2024-06-23 18:52:49 发布

阅读量156

点赞数

分类专栏：网页设计之div+css 文章标签：定位

本文链接：https://blog.csdn.net/weixin_40087851/article/details/83588088

版权

网页设计之div+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

定位

static：默认，元素框正常显示。
相对定位（relative）：相对该元素应当显示的左上角重新定位，虽然它脱离了标准流，但是它的空间不能被占用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>定位案例</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="div_css_position.css">
</head>
<body>
<div>
<div class="div1">内容一</div>
<div class="div1" id="special">内容二</div>
<div class="div1">内容三</div>
<div class="div1">内容四</div>
</div>
</body>
</html>

body{
	/*1px:边框的宽度  solid:实线  red:红色*/
	border:1px solid red; 
	width:550px;
	height:250px;
	/*让body自动居中(第一个用于上下，第二个用于左右，auto表示自动居中)*/
	margin:0 auto;
}

.div1{
	width:100px;
	height:100px;
	margin:10px 10px 10px 10px;
	background-color:green;
	border:1px solid yellow;
	float:left;
	text-align:center;
}

#special{
	position:relative;
	left:40px;
	top:120px;
}

在这里插入图片描述

绝对定位（absolute）：元素框从文档流完全删除，对该元素最近的那个脱离了标准流的元素定位，如果没有父元素（或者有父元素，但是父元素没有脱离标准流），则相对body左上角定位。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>定位案例</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="div_css_position.css">
</head>
<body>
<div>
<div class="div1">内容一</div>
<div class="div1" id="special">内容二</div>
<div class="div1">内容三</div>
<div class="div1">内容四</div>
<div class="div2"><div class="div1" id="special">内容二</div></div>
</div>
</body>
</html>

body{
	/*1px:边框的宽度  solid:实线  red:红色*/
	border:1px solid red; 
	width:700px;
	height:300px;
	/*让body自动居中(第一个用于上下，第二个用于左右，auto表示自动居中)*/
	margin:0 auto;
}

.div1{
	width:100px;
	height:100px;
	margin:10px 10px 10px 10px;
	background-color:green;
	border:1px solid yellow;
	float:left;
	text-align:center;
}

#special{
	position:absolute;
	left:40px;
	top:120px;
}

.div2{
	position:relative;
	left:10px;
	top:50px;
	width:150px;
	height:250px;
	background-color:pink;
	float:left;
}

在这里插入图片描述

fixed定位：总是以视窗的左上角定位。
left，top对static没有效果，需要使用margin-left，margin-top操作。
z-index：用于设置对象（div）显示时层叠的属性，z-index值越小，则越在下层显示。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>层叠案例</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="div_css_z_index.css">
</head>
<body>
<div class="div4">
<div class="div1"><img src="2.jpg"/></div>
<div class="div2"><img src="3.jpg"/></div>
<div class="div3"><img src="4.jpg"/></div>
</div>
</body>
</html>

.div4{
	width:800px;
	height:700px;
	float:left;
}

.div1{
	width:200px;
	height:200px;
	z-index:7;
	position:absolute;
	left:10px;
	top:10px;
}

.div2{
	width:300px;
	height:300px;
	z-index:5;
	position:absolute;
	left:300px;
	top:10px;
}

.div3{
	width:400px;
	height:400px;
	z-index:3;
	position:absolute;
	left:400px;
	top:10px;
}

在这里插入图片描述