欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

position: absolute和 float详解

程序员文章站 2022-05-27 09:22:25
...

position: absolute

首先我们先来说一下position属性，这是一个元素定位的属性，它的取值分别有absolute、fixed、relative、static、inherit等，我们先来简单说明一下各个取值的作用。

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

就如以上是所说的各个取值的作用。我们本次主要研究absolute的取值。

		按照上面说的意思，通俗一点说就是，absolute取值，是相对其第一个不为static取值的父元素作为其定位。
	这里说明一下static为position的默认值，当未明确position的取值时，其取值就为默认取值。当其全部父元素的标签
	的取值都为static时，其定位将会取body便签作为其定位标签。
		还有值得注意的是，当设置标签的定位未absolute时，该标签的display将会被变更为block，内联元素设置后便
	可以设置宽高。

下面我们来通过几个列子来看看当position取absolute时其情况

<!DOCTYPE HTML>
<head>
	<meta charset="utf-8"/>
	<title></title>
	
	<style type="text/css">
		.d1{
			width:200px;
			height: 200px;
			position: absolute;
			background-color: blue;	
		}
	</style>
</head>
<body>
	<div style="height: 100px; background-color: red;">
	</div>
	<div class="d1">
		
	</div>
</body>

position: absolute和 float详解
通过上述例子可以知道，当设置便签元素为absolute时，但未对其left、top等属性进行取值，其定位为正常文档流定位。但其脱离了正常文档流，是不占用正常文档流。

	当我对上述例子加入left:50px;属性时。其定位就会找到第一个不为static的元素进行左定位，但因为这里其所有父元素均为static，所以它会找body作为其定位的便签元素。但是其高度还是不会改变，因为我们未设置top;

position: absolute和 float详解
当我们设置top时，其定位就会找到第一个不为static的元素进行top定位，因为这里其所有父元素均为static，所以它会找body作为其定位的便签元素。如我们设置了left:50px;再设置top:300px;
position: absolute和 float详解
现在我们来看看absolute脱离文档流的案例：

<!DOCTYPE HTML>
<head>
	<meta charset="utf-8"/>
	<title></title>
	
	<style type="text/css">
		.d1{
			width:200px;
			height: 200px;
			position: absolute;
			background-color: blue;	
		}
		.d2{
			width:100px;
			height: 100px;
			position: absolute;
			background-color: red;	
		}
	</style>
</head>
<body>
	<div class="d1">
		
	</div>
	<div class="d2">
		
	</div>
</body>

结果如下：
position: absolute和 float详解
为什么两个元素会重叠，这是因为这两个元素脱离了文档流，不占用正常文档流的空间，所以重合了起来。

以上就是absolute的有关讲解。

floats属性

想必float属性是我们在编写代码时必不可少的，那么其浮动有哪些特性。我们下面来讲解一下；
首先我们还是通过一个例子看一下：

<!DOCTYPE HTML>
<head>
	<meta charset="utf-8"/>
	<title></title>
	
	<style type="text/css">
		.f1{
			width:100px;
			height: 100px;
			background-color: blue;	
			float: left;
		}
	</style>
</head>
<body>
	<div class="f1">
		
	</div>
	<div class="f1">
		
	</div>
	<div style="height: 200px; width: 400px; background-color: red;">
		
	</div>
</body>

position: absolute和 float详解
通过上面的例子和结果，我们可以进行分析，搜先虽然插入了一个元素，但它是float:left的元素，float属性是不占用正常文档流的，但它和absolute脱离文档流不同，absolute脱离文档流各个元素都会重叠，但float脱离的文本流，两个float元素还是会在同一高度，会互相排列，不会重叠。

下面我们再看一下，我们在红色这个大的div加上一句话爱我中华，我们来看一下结果：
position: absolute和 float详解
结果如下，文字环绕着float属性的div，为什么会这样呢？

	这是因为，float属性虽然让元素脱离了正常文档流，但是是通过提升元素高度使其脱离，其便签高度和正常文档流
中的文字在同一高度，所以会排列起来，而不是重叠起来。

最后补充一下，行内块和行内元素和文字处于同一高度，也就是和float元素处于同一高度，所以他们的按照顺序排列，不会重叠

以上就是position: absolute和 float讲解，若有不理解的地方可以私信我。有任何不对的地方欢迎指出。

相关标签： html css 定位

上一篇： 编程中如何使用调试

下一篇： gdb调试动态链接 _start位置

推荐阅读