CSS之position

最新推荐文章于 2022-11-20 09:47:06 发布

carson0408

最新推荐文章于 2022-11-20 09:47:06 发布

阅读量173

点赞数 1

分类专栏： HTML CSS 文章标签： CSS position

本文链接：https://blog.csdn.net/carson0408/article/details/79603816

版权

HTML 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

之前已经讲了盒子模型，以及行元素块元素等概念，现在对于布局来说差的就是定位，所以本文将介绍position的一些属性特点，从而在为布局的时候能够提供帮助。

1.relative

relative是以网页的左上角为原点，然后以定义的top、left、right、bottom来确定两个维度上的正方向，所以下面通过例子来讲解：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height:150px;
		position:relative;
		top:100px;
		left:50px;
		background-color:red;
	}

	
  </style>
 </head>
 <body>

<div></div>

 </body>
</html>

查看效果：

接下来将位置属性改一下：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height:150px;
		position:relative;
		bottom:100px;
		right:50px;
		background-color:red;
	}

	
  </style>
 </head>
 <body background-color="gray">

<div></div>

 </body>
</html>

得到效果图：

根据以上的规律可以知道，以左上角为原点，top表示从上往下为正轴，bottom表示从下往上是正轴，right表示从右往左是正轴，left表示从左往右是正轴。

2.absolute

absolute与relative最大的区别就是原点会发生改变，而top、bottom、left和right的正轴方向都是在网页可视范围内的，比如top是从网页上端往下、bottom是从网页下端往上、left是从网页左端往右、right是从网页右端往左。因此如果使用right和bottom那么右下角就是原点，其它同理。以下用实例说明：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height:150px;
		position:absolute;
		bottom:100px;
		right:50px;
		background-color:red;
	}

	
  </style>
 </head>
 <body>

<div></div>

 </body>
</html>

效果图如下：

这里使用了bottom和right，所以是以左下角为原点的，往上和往左是正轴方向。但是absolute有个特点就是如果有下拉滚动条的，一旦拖动下拉滚动条，块也会进行滚动，它的绝对体现在相对于初始那个点它是绝对的，一旦拖动滚动条，那个点发生了改变，那么块也随之改变。

3.fixed

fixed是固定的意思，对于四个方向的坐标以及正负轴来说，与absolute是一样的，区别在于它位置是固定的，甚至下拉滚动条也不能改变它的位置。以下通过示例来区分fixed和absolute的区别。

<!DOCTYPE html>
<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
  body{
	height:3000px;
  }
	div {
		width: 200px;
		height:150px;
		position:fixed;
		bottom:100px;
		right:50px;
		background-color:red;
	}
	.div{
	
		width: 100px;
		height:50px;
		position:absolute;
		bottom:50px;
		right:50px;
		background-color:green;
	
	}

	
  </style>
 </head>
 <body>

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

 </body>
</html>

效果图如下：

以上红色块是代表fixed的，绿色块是代表absolute的，接下来拖动下拉滚动条，变化如下：

可以看出红色块并未移动，而绿色块发生了移动，是因为它原本最底下的参考点往上移动了，所以它也跟着往上移动。

4.inherit

inherit就是继承的意思，如果它的配置是以父类为基准的，就算子类重新配置，父类的定位配置也会将其覆盖。

<!DOCTYPE html>
<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
  
	.par {
		width: 200px;
		height:150px;
		background-color:red;
	}
	.son{
	
		width: 100px;
		height:50px;
		position:inherit;
		bottom:50px;
		right:50px;
		background-color:green;
	
	}

	
  </style>
 </head>
 <body>

<div></div>
<div class="par"><div class="son"></div></div>

 </body>
</html>

效果如下：

5.z-index

常规来说后面的块会覆盖前面的块，但是z-index可以改变层级的优先级，z-index值大的会覆盖z-index小的层级。实例如下：

<!DOCTYPE html>
<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
  
	.par {
		width: 200px;
		height:150px;
		background-color:red;
		position:fixed;
		left:50px;
		top:100px;
		
	}
	.son{
		
		color:green;
		position:fixed;
		left:80px;
		top:130px;
		
	
	}

	
  </style>
 </head>
 <body>

<div class="par"></div>
<div class="son">z-index的用法</div>
 </body>
</html>

效果如下：

可以看出后面的层会覆盖前面的层，那么接下来通过改变z-index的值来改变层的顺序。

<!DOCTYPE html>
<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
  
	.par {
		width: 200px;
		height:150px;
		background-color:red;
		position:fixed;
		left:50px;
		top:100px;
		
	}
	.son{
		
		color:green;
		position:fixed;
		left:80px;
		top:130px;
		z-index:-1;
		
	
	}

	
  </style>
 </head>
 <body>

<div class="par"></div>
<div class="son">z-index的用法</div>
 </body>
</html>

效果如下：