css之旅（三）css position属性

一天一丢丢

已于 2022-04-05 17:23:37 修改

阅读量202

点赞数

分类专栏： css 文章标签： css

于 2020-07-14 23:30:26 首次发布

本文链接：https://blog.csdn.net/letianxf/article/details/107349415

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文主要介绍css属性position各个属性值得区别。

属性值	描述
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
inherit	规定应该从父元素继承 position 属性的值。

一、文档流

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。
每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。
内联元素也不会独占一行。几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素。
有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。但是在IE6中浮动元素也存在于文档流中。

二、static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

static为默认值，元素正常出现在文档流中，left，top，bottom，right，z-index属性对它都没有作用。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<style>
		.container{
			color: green;
			font-size: 20px;
		}

		.box1{
			background: yellow;
			width: 200px;
			height: 200px;
		}

		.box2{
			background: red;
			width: 200px;
			height: 200px;
			left: 10px;
			top: 10px;
			z-index: 999999;
		}

		.box3{
			background: black;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box1">box1</div>

		<div class="box2">box2</div>

		<div class="box3">box3</div>
	</div>
	
</body>
</html>

在这里插入图片描述
可以看到，对box2添加的left，top，z-index都不会生效。

三、固定定位-fixed

不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

fixed其实就是元素相对于windows窗口的定位。它会脱离原来的文档流，会对它周边的其它元素的位置产生影响。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<style>
		.container{
			color: green;
			font-size: 20px;
		}

		.box1{
			background: yellow;
			width: 200px;
			height: 200px;
		}

		.box2{
			background: red;
			width: 200px;
			height: 200px;
			position: fixed;
			left: 100px;
			top: 100px;
			z-index: 999999;
		}

		.box3{
			background: black;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box1">box1</div>

		<div class="box2">box2</div>

		<div class="box3">box3</div>
	</div>
	
</body>
</html>

在这里插入图片描述
可以看到，box2脱离了原来的文档流，box3会向上移动，left，top，z-index会对box2起作用。并且，box2不会随着页面的滚动而滚动。

四、相对定位-relative

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

relative相对定位其实就是相对它自己原来的位置进行定位。这里相对它自己原来的位置的意思是：假如原来是static，relative会相对这个假如static的位置进行定位。left，top，z-index会对relative元素生效。而且，relative元素并不会脱离文档流。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<style>
		.container{
			color: green;
			font-size: 20px;
		}

		.box1{
			background: yellow;
			width: 200px;
			height: 200px;
		}

		.box2{
			background: red;
			width: 200px;
			height: 200px;
			position: relative;
			left: 100px;
			top: 100px;
			z-index: 999999;
		}

		.box3{
			background: black;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box1">box1</div>

		<div class="box2">box2</div>

		<div class="box3">box3</div>
	</div>
	
</body>
</html>

在这里插入图片描述
可以看到，box2没有脱离文档流，而且对它周围的元素也不会造成影响。

五、绝对定位-absolute

不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margin），且不会与其他边距合并。

absolute是相对第一个非static的父元素进行定位的，它会脱离文档流，会对周围元素的位置造成影响。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<style>
		.container{
			color: green;
			font-size: 20px;
			position: fixed;
		}

		.box1{
			background: yellow;
			width: 200px;
			height: 200px;
		}

		.box2{
			background: red;
			width: 200px;
			height: 200px;
			position: absolute;
			left: 100px;
			top: 100px;
			z-index: 999999;
		}

		.box3{
			background: black;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box1">box1</div>

		<div class="box2">box2</div>

		<div class="box3">box3</div>
	</div>
	
</body>
</html>