CSS定位简介_css定位有哪些-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_70296476/article/details/145524396

一、静态定位（Static Positioning）

二、相对定位（Relative Positioning）

三、绝对定位（Absolute Positioning）

四、固定定位（Fixed Positioning）

五、黏性定位（Sticky Positioning）

六、层叠顺序（Z-Index）

七、总结

CSS定位（Positioning）是网页布局中非常重要的一个概念，它允许开发者通过指定元素的位置来实现灵活的页面设计。CSS定位主要通过position属性来实现，该属性有五种值：static、relative、absolute、fixed和sticky。

一、静态定位（Static Positioning）

这是元素的默认定位方式，元素按照HTML文档流的顺序排列，不会受到其他定位方式的影响。静态定位不使用position属性，或者将position设置为static。

特点：

元素按照文档流顺序排列。
不会脱离文档流，不会影响其他元素的位置。
z-index无效。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Static Positioning</title>
     <style>
         .static-box {
             width: 100px;
             height: 100px;
             background-color: lightblue;
         }
     </style>
 </head>
 <body>
 <div class="static-box">Static Box</div>
 </body>
 </html>

该div按照文档流顺序排列，与其他元素保持正常布局关系。

二、相对定位（Relative Positioning）

相对定位是基于元素的正常位置进行偏移，可以通过top、right、bottom和left属性来调整元素的位置。元素仍然占据原来的空间，不会脱离文档流。

特点：

元素相对于其正常位置进行偏移。
元素仍然占据原来的空间，不会影响其他元素。
z-index有效。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Relative Positioning</title>
     <style>
         .relative-box {
             width: 100px;
             height: 100px;
             background-color: lightcoral;
             position: relative;
             top: 20px;
             left: 20px;
         }
     </style>
 </head>
 <body>
 <div class="relative-box">Relative Box</div>
 </body>
 </html>

内部的div相对于父元素偏移了20像素（向上）和10像素（向左），但父元素仍然占据原来的空间。

三、绝对定位（Absolute Positioning）

绝对定位是基于最近的非静态祖先元素进行定位，如果找不到这样的祖先元素，则基于根元素（通常是浏览器窗口）。绝对定位的元素会脱离文档流。

特点：

元素脱离文档流，不再占据空间。
可以通过top、right、bottom和left精确控制位置。
z-index有效。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Absolute Positioning</title>
     <style>
         .container {
             position: relative;
             width: 300px;
             height: 300px;
             background-color: lightgray;
         }
 
         .absolute-box {
             width: 100px;
             height: 100px;
             background-color: lightgreen;
             position: absolute;
             top: 50px;
             left: 50px;
         }
     </style>
 </head>
 <body>
 <div class="container">
     <div class="absolute-box">Absolute Box</div>
 </div>
 </body>
 </html>

该div固定在页面的指定位置（距离顶部50像素，距离左边50像素），并且不会影响其他元素的位置。

四、固定定位（Fixed Positioning）

固定定位类似于绝对定位，但其参考点是浏览器窗口，即使滚动页面，元素的位置也不会改变。

特点：

元素脱离文档流，不占空间。
参考点是浏览器窗口，不受滚动条影响。
z-index有效。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Fixed Positioning</title>
     <style>
         .fixed-box {
             width: 100px;
             height: 100px;
             background-color: lightpink;
             position: fixed;
             top: 10px;
             right: 10px;
         }
     </style>
 </head>
 <body>
 <div class="fixed-box">Fixed Box</div>
 <p>向下滚动以查看固定框保持在原位。</p>
 <div style="height: 2000px;"></div>
 </body>
 </html>

该div固定在浏览器窗口的右上角，即使滚动页面，它始终位于相同位置。

五、黏性定位（Sticky Positioning）

黏性定位结合了相对定位和固定定位的特点，当元素在视口内滚动时，它会变成固定定位；当超出视口时，它会恢复为相对定位。

特点：

元素在视口内滚动时变为固定定位。
超出视口后恢复为相对定位。
z-index有效。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sticky Positioning</title>
     <style>
         .sticky-box {
             width: 100px;
             height: 100px;
             background-color: lightyellow;
             position: sticky;
             top: 0;
         }
 
         .content {
             height: 1500px;
             background-color: lightgray;
             padding: 20px;
         }
     </style>
 </head>
 <body>
 <div class="sticky-box">Sticky Box</div>
 <div class="content">
     向下滚动以查看粘性框粘在顶部。
 </div>
 </body>
 </html>

当页面滚动时，该div会固定在距离顶部0像素的位置；当滚动超出该位置时，它会恢复为相对定位。

六、层叠顺序（Z-Index）

层叠顺序决定了元素在重叠情况下的显示顺序，通过设置z-index属性，可以控制元素的堆叠顺序。需要注意的是，只有当元素具有绝对、相对或固定定位时，z-index才有效。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Z-Index</title>
     <style>
         .box {
             position: relative;
             z-index: 1;
             background-color: lightblue;
             padding: 10px;
         }
 
         .box > div {
             position: absolute;
             z-index: 2;
             background-color: lightcoral;
             padding: 5px;
         }
     </style>
 </head>
 <body>
 <div class="box">
     外层div
     <div>内层div，堆叠顺序更高</div>
 </div>
 </body>
 </html>