css文档布局——盒子定位

最新推荐文章于 2025-05-20 03:00:00 发布

原创最新推荐文章于 2025-05-20 03:00:00 发布 · 1.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端学习

本文详细介绍了CSS中的定位概念，包括static、relative、absolute和fixed四种定位方式。通过实例展示了它们如何影响元素在页面布局中的位置，强调了relative定位的偏移量设置以及absolute和fixed定位的基准点选择。通过理解这些，读者能够更好地掌握CSS布局技巧。

最近在系统学习css，看到了定位这一部分，发现之前对这些概念还有点模糊，所以觉得有必要在这里详细的记录一下。

定位可以分为广义上的定位和狭义上的定位，广义上的定位就是把元素放在某个位置，这种定位操作可以通过任何css规则来完成。这里要说的是狭义上定位操作，在css中有一个position属性，它包含4个值，下面分别列出来：

1、static：这是默认的属性值，就是盒子按照标准流布局，包括浮动方式。

2、relative：相对定位，定义了此属性的盒子通常以它在标准流布局中的位置为基准，以偏移量值移动指定的距离，此时此盒子还在标准流中，其他盒子还是以同样的态度对待它。

3、 absolute：绝对定位，盒子以包含它框为基准，移动偏移量值的距离，此时他已经脱离了标准流布局，其他的元素会当它不存在一样。

4、fixed：固定定位，和绝对定位类似，但是他是以浏览器窗口为基准进行定位，当拖动浏览器滚动条时，他也佁然不动。

这里static就不着重讲了，他就是按照文档流式布局，不会发生移动的效果。

一、下面讲讲relative相对定位，给出默认状况下的文档布局：

<!DOCTYPE html>
<html>
<head>
	<title>定位</title>
	<style type="text/css">
	#father{
		border:1px solid gray;
		padding:15px;
	}
	#block1{
		background-color: red;
		border:1px dotted #000000;
		padding:10px;
	}
	</style>
</head>
<body>
	<div id="father">
		<div id="block1">box1</div>
	</div>
</body>
</html>

使用相对定位处理加属性position之外，还要另外设置偏移量，left、right、top、bottom这四个值分别规定水平方向和垂直方向上的偏移量。

首先在一个box中使用relative，设置偏移量，如下

#block1{
		background-color: red;
		border:1px dotted #000000;
		padding:10px;
		position: relative;
		left:30px;
		top:30px;
	}

效果很明显，盒子向下和向右移动了30px，相对于他原本在文档中的位置。

接下来放置两个盒子，他们开始是以流动布局的，于是

<!DOCTYPE html>
<html>
<head>
	<title>定位</title>
	<style type="text/css">
	#father{
		border:1px solid gray;
		padding:15px;
	}
	#block1{
		background-color: red;
		border:1px dotted #000000;
		padding:10px;
		
	}
	#block2{
		background-color: red;
		border:1px dotted #000000;
		padding:10px;
		
	}
	</style>
</head>
<body>
	<div id="father">
		<div id="block1">box1</div>
		<div id="block2">box2</div>
	</div>
</body>
</html>

效果如下：

给box1设置如上述的relative和偏移量left:30px、bottom:20px之后，效果如下：

它对box2的位置没有任何的影响，这时候box2还以为它在原来的位置，所以傻傻的呆在原处。

二、absolute绝对定位

这里还是用刚才的例子来讲，加一个盒子，效果如下：

接下来给box2设置绝对定位，和偏移量：

<!DOCTYPE html>
<html>
<head>
	<title>定位</title>
	<style type="text/css">
	#father{
		border:1px solid gray;
		padding:15px;
	}
	#block1{
		background-color: red;
		border:1px dotted #000000;
		padding:10px;
	}
	#block2{
		background-color: red;
		border:1px dotted #000000;
		padding:10px;
		position: absolute;
		top:0;
		right: 0;
	}
	#block3{
		background-color: red;
		border:1px dotted #000000;
		padding:10px;		
	}
	</style>
</head>
<body>
	<div id="father">
		<div id="block1">box1</div>
		<div id="block2">box2</div>
		<div id="block3">box3</div>
	</div>
</body>
</html>

效果如下：

box2跑到右上角了，这时候box2是以浏览器窗口为基准的，此时该盒子已经脱离了文档流布局，box1和box3是贴在一起的，完全不把box2放在眼里。

接下来，我在他们的父元素上设置一个relative属性：

#father{
		border:1px solid gray;
		padding:15px;
		position: relative;
	}

再看效果：

注意此时，box2是在框框的右上角，说明此时，box2是以他的父div为基准发生偏移的。以此表示，绝对定位不是只会以浏览器窗口为基准。而是会以距离它最近的一个已经定位的祖先元素为基准进行定位，若干没有这样的祖先，那就以窗口为基准。

三、fixed固定定位

fixed不像绝对定位基于祖先元素定位，而是执着的以浏览器窗口为基准，浏览器滚动条滚动都改变不了他的位置，这里就不详细说了。

标签

#css #前端