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

前端基础夯实--（CSS系列）CSS的定位

程序员文章站 2022-04-30 22:10:02
...

1、CSS中的position

1、关于CSS中的position的内容有标准流、定位和参数、层级等概念，我们在最后将实现一个小的Demo和网页跟随

2、标准流

1、标准流的布局方式就是我们使用块级元素和内联元素时候的规则，块级元素独占一行，内联元素与相邻的内联元素将在同一行中进行水平排列，如果宽度不够才会被挤到下一行中。

3、定位属性

1、position属性通过改变正常的标准流的属性，以非正常的方式迫使元素脱离标准流，position属性决定了元素将如何定位，通过top、left、right、bottom实现位置上的改变。

2、position中的可选参数有下面这几个，我们分别一一讲解：

（1）static（默认值：元素按照标准流的方式进行正常的排列）、

（2）relative（相对定位：使用了relative的元素依然属于正常的文档流，但是可以通过top、left、right和bottom来改变位置）

我们写一段代码来看看relative定位属性的特点：（relative是相对自己原来的位置进行移动的）

<!DOCTYPE html>
<html>
<head>
    <title>float</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		*{
			margin:0px;
			padding:0px;
		}
		.div1{width:100px;height:100px;background:red;position:relative;left:0;top:100px;border:1px solid #ccc;}
		.div2{width:100px;height:100px;background:transport;position:relative;left:0;top:-50px;border:1px solid #ccc;}
	</style>
</head>
<body>	
		<div class="div1">1</div>
		<div class="div2">2</div>
</body>
</html>

上述代码在浏览器上的效果是这样：div1是left为0，即相对于左侧没有移动，top为100px，即相对于上面有100px的距离，就说向下移动了100px，而div2是相对于div1top有-50px，即相对于div1上端有-50的距离，即向下移动了-50，就是向上移动了50px。

前端基础夯实--（CSS系列）CSS的定位

为什么是上面这样的效果我们来解释一下：首先设置left和top两个属性，是以浏览器左上端为原点，右侧为x正轴，下面为y的正轴，即相对于左侧向右移动的距离和相对于上面向下移动的距离。设置right和bottom则相反，向左为x正轴，向上为y的正轴，即相对于右侧向左移动的距离和相对于下面向上移动的距离，如下图所示：

前端基础夯实--（CSS系列）CSS的定位前端基础夯实--（CSS系列）CSS的定位

（3）absolute（绝对定位，使用adsolute的元素配合top，bottom，left，right等位置属性，元素脱离了正常的文档流，在整个网页中都是可以移动定位的，并且拥有了层级的概念，后写的元素将覆盖先写的元素）。

来看一下下面的代码：

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charse=utf-8">
    <style type="text/css">
	*{
	  margin:0;
	  padding:0;
	}
    	.text{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  top:50px;
	  left:50px;
	}
 	.bro{
	  width:100px;
	  height:100px;
	  background:blue;
	}
    </style>
</head>
<body>
     <div class="bro"></div>
     <div class="text"></div>
</body>
</html>

在浏览器中的效果就是这样：

前端基础夯实--（CSS系列）CSS的定位

对于绝对定位我们要注意的是：（a）当我们设置了position为absolute，但是没有设置top、left等位置属性，它还是会按照文档流的方式进行排列。（b）当设置了position为absolute的时候，元素就脱离了文档流，像上面的这个红色块就浮动在了蓝色块的上面。（c）位置属性的值的参照圆点是以属性值为标准，比如设置top和left，就以浏览器的左上角为圆点进行距离的布局，设置bottom和right，就以浏览器的右下角为圆点进行位置的布局。（d）绝对定位的四个原点是相对于窗口的四个端点，不是整个body或者div的四个端点。即使你把设置了绝对定位的元素放在某个父级元素里面，假如父级元素没有设置绝对定位，依旧会按照窗口的四个端点进行定位。（e）absolute是相对于static以外的第一个父元素进行定位，就是说向外去找每个父元素，假如有哪个父元素position不是默认值，或者有设置position，就相对它定位

（4）fixed（固定定位：配合top、bottom、left，right等位置属性的设置来是元素脱离文档流，并拥有层级的概念，常常用于对联广告和登录弹窗，并且任何元素对固定定位没有约束力）

下面来看一段代码：

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charse=utf-8">
    <style type="text/css">
	*{
	  margin:0;
	  padding:0;
	}
	body{height:3000px;}
    	.text{
	  width:100px;
	  height:100px;
	  background:red;
	  position:fixed;
	  top:50px;
	  left:50px;
	}
 	.bro{
	  width:100px;
	  height:100px;
	  background:blue;
	}
    </style>
</head>
<body>
     <div class="bro"></div>
     <div class="text"></div>
</body>
</html>

在浏览器总的效果就是这样：开始的时候，红色区块就是相对在窗口的左上角的那个地方，当我们下拉浏览器时，红色区块依旧相对于当前窗口显示在左上角那个位置，这个就和我们网上的广告一样，不管你浏览到什么位置，广告始终相对于当前窗口的位置不变，你不点掉它它就一直能显示在你看的见的地方。

值得注意的就是，fixed同样和absolute可以设置左上，右上，左下，右下。

前端基础夯实--（CSS系列）CSS的定位前端基础夯实--（CSS系列）CSS的定位

（5）inherit（继承）

看下面的代码：

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charse=utf-8">
    <style type="text/css">
	*{
	  margin:0;
	  padding:0;
	}
	
    	.text{
	  width:100px;
	  height:100px;
	  background:blue;
	  position:inherit;
	  top:100px;
	  left:100px;
	}
 	.bro{
	  width:200px;
	  height:200px;
	  background:red;
	  position:relative;
	}
    </style>
</head>
<body>
     <div class="bro">
     	<div class="text"></div>
     </div>
</body>
</html>

当我们没有在父元素上面设置position的属性值，即使我们子元素有position：inherit，还有top，left等属性值，都是没有效果的。如下图1，当我们给父元素设置了position：relative，那么子元素也就继承了position为relative，相对于父元素的左上端的顶点分别向下和向右移动了100px，如图2：

前端基础夯实--（CSS系列）CSS的定位前端基础夯实--（CSS系列）CSS的定位

4、z-index

1、所有带有定位属性的元素都是具有层级的，并且先写的具有定位属性的元素会被后写的具有定位属性的元素覆盖，z-index提供了3个参数，分别是auto，number和inherit，auto是网页中的默认属性，number是可以设置层级的大小，number的数字越大表示层级越高，inherit是继承的意思。

2、（1）z-index可以设置元素的叠加顺序，但依赖定位属性

      （2）z-index大的元素会覆盖z-index小的元素

      （3）z-index为auto的元素不参与层级比较

      （4）如果给z-index设置负值，元素就会被标准流中的元素覆盖

      （5）z-index只作用于有定位属性的元素，没有定位属性的元素设置z-index这个属性没有作用

      （6）层级的大小受制于父元素的影响，比如子元素的层级为1，但是父级元素层级为10，相邻元素层级为5，虽然子元素层级小于相邻元素，但是由于父元素层级高于相邻元素，子元素也能覆盖相邻元素。

 

相关标签： CSS定位 定位属性

上一篇： leetcode面试题58 - II. 左旋转字符串(一行解决)

下一篇： 字符串的统计字符串

推荐阅读