CSS页面布局基础2——定位

最新推荐文章于 2024-07-17 18:42:40 发布

whh4122

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量748

点赞数

文章标签： html 前端 css 网站设计布局

本文链接：https://blog.csdn.net/whh4122/article/details/40055257

版权

1、四种定位类型：通过position属性指定分别是static(默认值)、relative、absolute、fixed
static( 静态定位 )：表示按照正常定位方案，元素盒按照在文档流中出现的顺序依次格式化
relative( 相对定 位 )：将移动元素盒，但是它在文档流中的原始空间会保留下来。
absolute( 绝对定位 )：元素盒彻底从文档流中脱离出来，并相对于其容器块进行定位。因为这些元素从文档流中脱离出来，所以它们不再影响周边元素的布局，并且它们占据的空间不会被保留。
fixed( 固定定位 )：与绝对定位类似，元素从文档流中脱离，但是它们不是相对于容器块定位，而是相对于视口定位。
2、 相对定位 ：(1)声明：position：relative
(2)使用top,right,bottom,left中的一个或者多个偏移属性相对于它们在正常文档流中的初始位置进行定位。没有设置偏移属性的，默认被设置为auto。
(4)在文档流中所占据的原始空间被保留。
(3)可能会覆盖其他的元素。

<!DOCTYPE html>
<html>
<head>
	<title>相对定位</title>
	<meta charset="utf-8" />
	<style type="text/css">
	.div1{
		width: 450px;
		height: 450px;
		border:solid;
		border-color: black;
		margin:50px;
	}
	.div2{
		width: 400px;
		height: 400px;
		border:solid;
		border-color: red;
		margin: 10px;
	}
	.div3{
		width: 300px;
		height: 300px;
		border:solid;
		border-color: green;
		margin: 10px;
	}
	.div4{
		position: relative;
		left:50px;
		top:50px;
		width: 100px;
		height: 100px;
		margin:10px;
		background-color: #fa1;
	}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">
			<div class="div3">
				<div class="div4"></div>
			</div>
		</div>	
	</div>
</body>
</html>

将上述代码中的

position: relative;
		left:50px;
		top:50px;

去掉的时候，运行结果为：

加上后的效果为：

3、 绝对定位 :(1)声明：position：absolute
(2)使用top,right,bottom,left中的一个或者多个偏移属性相对于其容器块的边缘进行定位。没有设置偏移属性的，默认被设置为auto。
(3)偏移值应用于元素盒的外边缘(包含margin值)

(4)绝对定位的元素从文档流中完全脱离出来。该元素在正常文档流中所占据的空间不保留，并且不影响其他元素。

<!DOCTYPE html>
<html>
<head>
	<title>相对定位</title>
	<meta charset="utf-8" />
	<style type="text/css">
	.div1{
		width: 450px;
		height: 450px;
		border:solid;
		border-color: black;
		margin:50px;
	}
	.div2{
		width: 400px;
		height: 400px;
		border:solid;
		border-color: red;
		margin: 10px;
	}
	.div3{
		width: 300px;
		height: 300px;
		border:solid;
		border-color: green;
		margin: 10px;
		position: absolute;<!--绝对定位div3-->
	}
	.box1{
		width: 100px;
		height: 100px;
		background-color: #bbb;
/*		position: relative;
		top: -79px;
		left: -89px;*/  <!--相对定位代码-->
	}
	.box2{
		width: 100px;
		height: 100px;
		background-color:yellow;<pre name="code" class="html"> <span style="white-space:pre">		</span><!--绝对定位代码-->

/*position: absolute;top: 10px;left: 10px;*/}.box3{width: 100px;height: 100px;background-color:#faa;

 <span style="white-space:pre">		</span><!--固定定位代码-->

position: fixed;top: 10px;left: 10px;}</style></head><body><div class="div1"><div class="div2"><div class="div3"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></div></div></div></body></html>

绝对定位box2前：