CSS定位分为哪几种？？HTML、CSS

小灰灰 2022-11-19 11:28 362阅读 0赞

# **position定位** #

说我们相对定位前，我们先说一下我们使用HBuilder的一个技巧，我们创建一个分组为box的div的途径，如果我们要创建一个class名为box的div，我们可以这样敲div.box + tab。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jAN5GD4y-1587865901298)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/1.gif)\]][img-jAN5GD4y-1587865901298_Users_mac_Desktop_MarkDown _HTML_CSS_1.gif]

要是3个或是更多个可以这样div.box$\*3 + tab。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ayuHhsQ1-1587865901300)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/2.gif)\]][img-ayuHhsQ1-1587865901300_Users_mac_Desktop_MarkDown _HTML_CSS_2.gif]

好了我们现在说一个问题，我们创建了三个盒子，我们想这样改变盒子的位置：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H85Rp2G9-1587865901302)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/3.jpg)\]][img-H85Rp2G9-1587865901302_Users_mac_Desktop_MarkDown _HTML_CSS_3.jpg]

我们可以把这个动作分为两步。

1.  将box2向右移动200px。
2.  再将box2向下移动200px。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pw5nsX3h-1587865901304)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/4.jpg)\]][img-Pw5nsX3h-1587865901304_Users_mac_Desktop_MarkDown _HTML_CSS_4.jpg]

我们执行第一步给box2设置一个左外边距`margin-left:200px`。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tgTlLtv9-1587865901305)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/5.jpg)\]][img-tgTlLtv9-1587865901305_Users_mac_Desktop_MarkDown _HTML_CSS_5.jpg]

成功了，那我们继续第二步。给box2设置一个上外边距`margin-top:200px`。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YwUa7522-1587865901307)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/6.jpg)\]][img-YwUa7522-1587865901307_Users_mac_Desktop_MarkDown _HTML_CSS_6.jpg]

我们发现没能达到预期效果。。。那我们继续调整，我们将box3向上调整200px。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UE5IMbwx-1587865901309)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/7.jpg)\]][img-UE5IMbwx-1587865901309_Users_mac_Desktop_MarkDown _HTML_CSS_7.jpg]

好像可以了奥，但是好像很麻烦，我们只想调整box2的位置，却还要去调整box3，真麻烦。所以我们引出定位！！！

*  我们说下什么是定位：
 *  定位指的就是**将指定的元素摆放到页面的任意位置**。
 *  通过定位可以任意的摆放元素。
 *  怎么设置定位呢？
 *  通过position属性！！

我们查看菜鸟教程的参考手册，查找可能的值：

<table> 
 <thead> 
 <tr> 
 <th style="vertical-align:middle;">值</th> 
 <th style="vertical-align:middle;">描述</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="border-color:#dddddd;vertical-align:middle;"><a href="https://www.runoob.com/css/css-positioning.html#position-absolute" rel="nofollow">absolute</a></td> 
 <td style="border-color:#dddddd;vertical-align:middle;">生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。</td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;vertical-align:middle;"><a href="https://www.runoob.com/css/css-positioning.html#position-fixed" rel="nofollow">fixed</a></td> 
 <td style="border-color:#dddddd;vertical-align:middle;">生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。（固定定位也是决定定位的一种）</td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;vertical-align:middle;"><a href="https://www.runoob.com/css/css-positioning.html#position-relative" rel="nofollow">relative</a></td> 
 <td style="border-color:#dddddd;vertical-align:middle;">生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。</td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;vertical-align:middle;"><a href="https://www.runoob.com/css/css-positioning.html#position-static" rel="nofollow">static</a></td> 
 <td style="border-color:#dddddd;vertical-align:middle;">默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;vertical-align:middle;"><a href="https://www.runoob.com/css/css-positioning.html#position-sticky" rel="nofollow">sticky</a></td> 
 <td style="border-color:#dddddd;vertical-align:middle;">粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意:&nbsp;Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。</td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;vertical-align:middle;">inherit</td> 
 <td style="border-color:#dddddd;vertical-align:middle;">规定应该从父元素继承 position 属性的值。</td> 
 </tr> 
 <tr> 
 <td style="border-color:#dddddd;vertical-align:middle;">initial</td> 
 <td style="border-color:#dddddd;vertical-align:middle;">设置该属性为默认值，详情查看&nbsp;<a href="https://www.runoob.com/cssref/css-initial.html" rel="nofollow">CSS initial 关键字</a>。</td> 
 </tr> 
 </tbody> 
</table>

## **relative相对定位** ##

当元素的position设置为relative时，将元素设置为相对定位。特点：

1.  当开启了元素的相对定位以后，而不设置偏移量，元素不会产生任何变化。
2.  相对定位是相对与元素在文档流中员原来的位置进行定位。
3.  相对定位的元素**不会脱离文档流**。
4.  相对定位会使我们的元素提升一个层级。
5.  相对定位不会改变元素的性质，块还是块，内联还是内联。（其实与第三点性质是一回事）

当开启了元素的定位（position属性值是一个非static的值）时，可以通过left、right、top、bottom四个属性来设置元素的偏移量。

*  **left**：元素相对与其定位位置左侧偏移量。
 *  **right**：元素相对与其定位位置右侧偏移量。
 *  **top**：元素相对与其定位位置上侧偏移量。
 *  **bottom**：元素相对与其定位位置下侧偏移量。

现在我们看下使用相对定位来解决我们上面描述的问题。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jGdYozCV-1587865901310)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/8.jpg)\]][img-jGdYozCV-1587865901310_Users_mac_Desktop_MarkDown _HTML_CSS_8.jpg]

第四个特点，会提升我们的元素的一个层级什么意思呢？我们来看一下：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fqB2JkLF-1587865901311)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/9.jpg)\]][img-fqB2JkLF-1587865901311_Users_mac_Desktop_MarkDown _HTML_CSS_9.jpg]

通常偏移量只需要使用两个就可以对一个元素进行定位。一般选择水平方向的一个偏移量和垂直方向的一个偏移量来为一个元素进行定位。

我们在设置相对定位的时候只需要想象一个平面坐标系。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sZHMvStu-1587865901312)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/10.jpg)\]][img-sZHMvStu-1587865901312_Users_mac_Desktop_MarkDown _HTML_CSS_10.jpg]

## **absolute绝对定位** ##

当position属性值设置为absolute时，则开启了元素的绝对定位。特点：

1.  开启绝对定位会使**元素脱离文档流**。
2.  开启绝对定位以后如果不设置偏移量，则元素的位置不会发生变化。（开启后不设置，浏览器会自动给元素添加默认的偏移量，就是当前位置）

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v3NQci0I-1587865901313)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/10后.jpg)\]][img-v3NQci0I-1587865901313_Users_mac_Desktop_MarkDown _HTML_CSS_10_.jpg]

1.  绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的。如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。（一般情况，开启了**子元素的绝对定位**都会同时开启**父元素的相对定位**。）

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C7rHoDK1-1587865901314)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/11.jpg)\]][img-C7rHoDK1-1587865901314_Users_mac_Desktop_MarkDown _HTML_CSS_11.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0CUbP4WB-1587865901315)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/12.jpg)\]][img-0CUbP4WB-1587865901315_Users_mac_Desktop_MarkDown _HTML_CSS_12.jpg]

1.  绝对定位会使元素提升一个层级。
2.  绝对定位会改变元素性质，内联元素变成块元素，块元素的宽度和高度默认都被内容撑开。

## **fixed固定定位** ##

当元素的position属性设置为fixed时，则开启了元素的固定定位。固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样。

不同的是：

1.  **固定定位永远都是相对于浏览器窗口定位的**。
2.  固定定位会固定在浏览器窗口的某个位置不会随滚动条滚动。eg：广告。（IE6不支持固定定位）

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eLZjRV2i-1587865901316)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/13.gif)\]][img-eLZjRV2i-1587865901316_Users_mac_Desktop_MarkDown _HTML_CSS_13.gif]

# **z-index层级问题** #

我们开启定位后会使元素提升一个层级。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3DaiZuX0-1587865901316)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/14.jpg)\]][img-3DaiZuX0-1587865901316_Users_mac_Desktop_MarkDown _HTML_CSS_14.jpg]

那如果将box1和box3也开启定位，提升到相同层级呢？

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IrjRsTI5-1587865901318)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/15.jpg)\]][img-IrjRsTI5-1587865901318_Users_mac_Desktop_MarkDown _HTML_CSS_15.jpg]

我们说，如果定位元素的层级是一样的，则**结构上在下面的元素会盖住上面的元素**。

那我们能不能再调整层级呢？？

可以的!!!

*  通过z-index属性可以用来设置元素的层级。
 *  可以为z-index制定一个正整数作为值，该值将会作为当前元素的层级。
 *  层级越高，越优先显示。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GYg4Fu37-1587865901319)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/16.jpg)\]][img-GYg4Fu37-1587865901319_Users_mac_Desktop_MarkDown _HTML_CSS_16.jpg]

*  z-index对于没有开启position定位的元素没用。
 *  父元素的层级再高也不会盖住子元素。（可以理解为父爱比较伟大）

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S0RUtWIE-1587865901320)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/17.jpg)\]][img-S0RUtWIE-1587865901320_Users_mac_Desktop_MarkDown _HTML_CSS_17.jpg]

# **opacity设置元素的透明背景** #

opacity可以用来设置元素背景的透明，它需要一个0~1之间的值。

*  0表示完全透明。
 *  1表示完全不透明。
 *  0.5表示半透明。

<code class="language-html"><!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title></title>
 		<style type="text/css">
 			.box1{
 				width: 200px;
 				height: 200px;
 				background-color: red;
 				/*开启相对定位*/
 				position: relative;
 				z-index: 1;
 				/*设置半透明*/
 				opacity: 0.5;
 			}
 			.box2{
 				width: 200px;
 				height: 200px;
 				background-color: yellow;
 				/*开启绝对定位*/
 				position: absolute;
 				/*设置偏移量*/
 				top: 100px;
 				left: 100px;
 				z-index: 2;
 				/*设置半透明*/
 				opacity: 0.5;
 			}
 			.box3{
 				width: 200px;
 				height: 200px;
 				background-color: aqua;
 				/*开启绝对定位*/
 				position: absolute;
 				left: 200px;
 				top: 200px;
 				z-index: 3;
 				/*设置半透明*/
 				opacity: 0.5;
 			}
 		</style>
 	</head>
 	<body>
 		<div class="box1"></div>
 		<div class="box2"></div>
 		<div class="box3"></div>
 	</body>
 </html>
 
 </code>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V6rWn3rx-1587865901321)(/Users/mac/Desktop/MarkDown /HTML、CSS（九）/18.jpg)\]][img-V6rWn3rx-1587865901321_Users_mac_Desktop_MarkDown _HTML_CSS_18.jpg]

我么可以通过opacity来设置透明度，产生朦胧的感觉。

注意：opacity属性，在IE8及以下的浏览器不支持，需要使用如下属性代替`filter:alpha(opacity=50);`。

[img-jAN5GD4y-1587865901298_Users_mac_Desktop_MarkDown _HTML_CSS_1.gif]: /images/20221119/0914a42b9a08465b8a182e16f3efda5b.png
[img-ayuHhsQ1-1587865901300_Users_mac_Desktop_MarkDown _HTML_CSS_2.gif]: /images/20221119/cfd4be3a5d7342d48ce25e2305ae0549.png
[img-H85Rp2G9-1587865901302_Users_mac_Desktop_MarkDown _HTML_CSS_3.jpg]: /images/20221119/2d56876c02964272b482ae4e863a52b1.png
[img-Pw5nsX3h-1587865901304_Users_mac_Desktop_MarkDown _HTML_CSS_4.jpg]: /images/20221119/7b98db1ddb2e406fa2b117db2b39ef7f.png
[img-tgTlLtv9-1587865901305_Users_mac_Desktop_MarkDown _HTML_CSS_5.jpg]: /images/20221119/b000d8f258594fdbb704d081fe62f5de.png
[img-YwUa7522-1587865901307_Users_mac_Desktop_MarkDown _HTML_CSS_6.jpg]: /images/20221119/d630eb3f8367495aa693be7d4e8312b7.png
[img-UE5IMbwx-1587865901309_Users_mac_Desktop_MarkDown _HTML_CSS_7.jpg]: /images/20221119/f5849ec616154234bef40473ea6a5c06.png
[img-jGdYozCV-1587865901310_Users_mac_Desktop_MarkDown _HTML_CSS_8.jpg]: /images/20221119/637c6f5d4788420dbcd0c10a96447045.png
[img-fqB2JkLF-1587865901311_Users_mac_Desktop_MarkDown _HTML_CSS_9.jpg]: /images/20221119/29982fb7b8104797b02cd18076fac0fb.png
[img-sZHMvStu-1587865901312_Users_mac_Desktop_MarkDown _HTML_CSS_10.jpg]: /images/20221119/f3d40bf78f6e4c01b85ca693797f3aa4.png
[img-v3NQci0I-1587865901313_Users_mac_Desktop_MarkDown _HTML_CSS_10_.jpg]: /images/20221119/34afc8c6602243ba86f0bffef9e346e5.png
[img-C7rHoDK1-1587865901314_Users_mac_Desktop_MarkDown _HTML_CSS_11.jpg]: /images/20221119/1ff24f645d5441d89d46f7699390b672.png
[img-0CUbP4WB-1587865901315_Users_mac_Desktop_MarkDown _HTML_CSS_12.jpg]: /images/20221119/164e59a64db44b139c5ac940e1e81ba7.png
[img-eLZjRV2i-1587865901316_Users_mac_Desktop_MarkDown _HTML_CSS_13.gif]: /images/20221119/f6d323011b024c699b560013c504d4b4.png
[img-3DaiZuX0-1587865901316_Users_mac_Desktop_MarkDown _HTML_CSS_14.jpg]: /images/20221119/98ac8bb8ed9d4804b07d375db34e4ce8.png
[img-IrjRsTI5-1587865901318_Users_mac_Desktop_MarkDown _HTML_CSS_15.jpg]: /images/20221119/5e5173384d73480885af28d3b6ed0ab7.png
[img-GYg4Fu37-1587865901319_Users_mac_Desktop_MarkDown _HTML_CSS_16.jpg]: /images/20221119/e62a27dc3ba7406d9f1f0d1249edd954.png
[img-S0RUtWIE-1587865901320_Users_mac_Desktop_MarkDown _HTML_CSS_17.jpg]: /images/20221119/2287dfa5c64443418415f85f8bad976e.png
[img-V6rWn3rx-1587865901321_Users_mac_Desktop_MarkDown _HTML_CSS_18.jpg]: /images/20221119/137431ca91034425a9cef24ec994b661.png