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

css:绝对定位那些事--position:absolute

程序员文章站 2022-05-27 09:18:34
...

position：absolute

想知道绝对定位怎么用，让我们先看看没有绝对定位的时候是什么样？

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>position:absolute&&relative</title>
	<style type="text/css">
		.demo1{
			width: 100px;
			height: 100px;
			background-color: orange;
		}
		.demo2{
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="demo1"></div>
	<div class="demo2"></div>
</body>
</html>

如下图这样是浏览器显示的效果：两个div，一上一下地紧紧挨着。

css:绝对定位那些事--position:absolute

如果我们希望这两个div能站在一行里，我们可以修改div的display属性，让两个div可以在行内并排

.demo1{
			width: 100px;
			height: 100px;
			background-color: orange;
/*div的display为block（块级元素）, 手动修改为inline-block（行级块元素）*/
			display: inline-block;
		}
		.demo2{
			width: 200px;
			height: 200px;
			background-color: pink;
/*demo2也修改为行级块元素*/
			display: inline-block;
		}

<!-- 这里两个标签之间不要留有空格和回车，不然两div站在一起的时候会有4px的空白 -->
<div class="demo1">demo1</div><div class="demo2">demo2</div>

如下图这样，是两个可以站在一起的div
css:绝对定位那些事--position:absolute

但是如果粉色的div可以到屏幕的右边去，我们不用position也能做到，比如给demo2添加margin-left，当然这是一种很low的方式，而且这样很麻烦，因为要不停地测试，试图将距离一点点地把div往理想的位置靠；如果把浏览器的缩放修改一下，就会发现，页面整体还会向左偏移。

所以我们有了一个把元素放在页面右侧更好的方式，就是position:absolute

.demo2{
			width: 200px;
			height: 200px;
			background-color: pink;
/* 这里的demo2 改为绝对定位，以整个文档作为参照物，demo2的margin-right离文档右侧的距离为0px */
			position: absolute;
			right: 0px;
		}

css:绝对定位那些事--position:absolute

细心的朋友可能想问，为什么这两不是顶部对齐呢？这也不是我想要的效果啊。

不慌，这里我要科普一下absolute的定位规则：

  • 绝对定位会以没有定位absolute的时候的出生位置，作为left和top的默认值
  • 绝对定位是相对于最近的非static定位的祖先元素作为参照物
  • 绝对定位已经脱离了文档流，所以视觉上是层级离我们更近一点

接下来我用小栗子来解释一下这三条规则：

*{
  /*为了消除<body>自带的margin:8px*/
  margin: 0;
  padding: 0;
}
.demo1{
  width: 100px;
  height: 100px;
  background-color: purple;
}
.demo2{
  width: 200px;
  height: 200px;
  background-color: pink;
  /*position: absolute;*/
}
.demo3{
  width: 300px;
  height: 300px;
  background-color: orange;
}

<body>
	<div class="demo1"></div>
	<div class="demo2"></div>
	<div class="demo3"></div>
</body>

如果demo2没有设置position定位，那么就是下图的样子：

css:绝对定位那些事--position:absolute

如果demo2有position定位，就是下图这个样子：

css:绝对定位那些事--position:absolute

点击F12调出浏览器的调试工具

可以看到，这里demo2的位置并没有发生变化，但是在demo2后面的demo3的位置却上来了，好像没有“看到”demo2的存在一般，于是在视觉上好像demo2和demo3重叠了一样。

看调试工具可知，demo2的top=100px, left=0px，也就是说，demo2虽然已经脱离了文档流，和demo1、demo3不在一个层次里，但是依然保留着原始的位置信息，我们可以通过修改left、top、left、right来控制demo2的位置，这是原来的文档流（position:static）所不能实现的效果。

既然 left | top | left | right 可以从四个方向来控制绝对定位元素的位置，那么我们就要知道这四个属性怎么用。首先，绝对定位是相对于最近的非static定位的祖先元素作为参照物，所以这四个属性是相对于这个最近的非static定位的祖先元素的，比如下面这个例子：

*{ 
  margin: 0;
}
.demo1{
  width: 100px;
  height: 100px;
  background-color: purple;
  position: absolute;
}
.demo2{
  width: 200px;
  height: 200px;
  background-color: pink;
  /*position: absolute;*/
  margin: 20px;
}

<div class="demo2">
		<div class="demo1"></div>
</div>

首先，我们注释demo2的定位，只让demo1是绝对定位元素：

css:绝对定位那些事--position:absolute

我们可以发现：这里的demo1是相对整个页面定位，left:20px 、top:20px，而且这里left是指 demo1的左margin到文档左侧的距离，top是指demo1的上margin到文档顶部的距离。

如果我们把demo2的定位的注释去掉，会发现demo1的left和top又变了：

css:绝对定位那些事--position:absolute

也就是说，现在的demo1 left:0px 、top:0px，这时left是指 demo1的左margin到demo2的左padding的距离，right是指 demo1的右margin到demo2的右padding的距离。（demo2是距离demo1最近的非static定位的祖先元素）

补充一点: left 和right同时设置的时候，left会覆盖right；top和bottom同时设置的时候，top会覆盖bottm。所以一般来说，只需要设置两个定位：left和right中的一个，top和bottom中的一个。

​ 最后我来利用z-index来设置绝对定位的显示层级。

如果接触过ps，应该了解“图层”的概念，position:absolute，会把该绝对定位元素从原来的“图层”脱离出来，放在新的“图层”里，如果绝对定位元素和原本的文档流元素发生重叠，那么我们先看到的一定是绝对定位元素。

*{
  /*为了消除<body>自带的margin:8px*/
  margin: 0;
  padding: 0;
}
.demo1{
  width: 100px;
  height: 100px;
  background-color: purple;
}
.demo2{
  width: 200px;
  height: 200px;
  background-color: pink;
  position: absolute;
  /*top:50px：会覆盖demo1的区域；opacity: 不透明度为80%；z-index：在z轴也就是和屏幕垂直的方向与我们的距离*/
  top: 50px;
  opacity: 0.8;
  /*z-index: -1;*/
}
.demo3{
  width: 300px;
  height: 300px;
  background-color: orange;
}

<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>

如图可以看到，绝对定位元素可以覆盖demo1和demo3，此时z-index:auto

css:绝对定位那些事--position:absolute

如果将代码里的z-index注释去掉，让demo2的z-index: -1，那么demo2就会被demo1和demo3覆盖

css:绝对定位那些事--position:absolute

好了，上面三个关于absolute的特性我已经通过举例子的方式说明了，那么回到最初的那两个div无法顶部对齐的问题，我们可以利用这些特性，得到两种解决方案：

  1. 互换div的位置demo2在前，demo1在后

绝对定位元素在前，那么即使不设置top，top的默认值 也是出生时的位置值 （0px）

demo1虽然在后，但是因为demo2变成绝对元素，到了别的“图层”，那么相当于原“图层”只有demo1,demo1的位置就会变化，上升到原demo2所在的位置

<div class="demo2"></div>
<div class="demo1"></div>
  1. 当然是给demo2添加top
.demo2{
			width: 200px;
			height: 200px;
			background-color: pink;
/* 这里的demo2 改为绝对定位，以整个文档作为参照物，demo2的margin-right离文档右侧的距离为0px */
			position: absolute;
			right: 0px;
  /* 添加top */
  		top: 0px;
		}

那么现在，两个div 就可以并排站在一起啦
css:绝对定位那些事--position:absolute

顺便教大家如何制作一个两栏布局，其实原理和这两个站在一行的div类似，只是有一些细节需要注意：

  1. 一个div不需要设置固定宽度，另一个div（绝对定位元素）需要设置固定宽度
  2. 不设固宽的div需要设置margin-right/margin-left = 绝对定位元素的固定宽度（保证两个div没有重叠的部分）
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>position:absolute&&relative</title>
	<style type="text/css">
		*{
			/*为了消除<body>自带的margin:8px*/
			margin: 0;
			padding: 0;
		}
		.demo1{
			height: 200px;
			background-color: orange;
/*2.不设固宽的div需要设置margin-right= 绝对定位元素的固定宽度（保证两个div没有重叠的部分）*/     
			margin-right: 200px;
		}
		.demo2{
/*1.一个div不需要设置固定宽度，另一个div（绝对定位元素）需要设置固定宽度*/        
			width: 200px;
			height: 200px;
			background-color: pink;    
			position: absolute;
			right: 0px;
		}
	</style>
</head>
<body>
	<div class="demo2">demo2</div>
	<div class="demo1">demo1</div>
</body>
</html>

css:绝对定位那些事--position:absolute

好啦，一个两栏布局就完成啦，大家学会了吗？

相关标签： css

上一篇： 贵州人民的祖籍是哪里的？为什么贵州汉人这么多？

下一篇： background CSS背景属性

推荐阅读