CSS Position(定位)介绍

超、凢脫俗 2022-06-09 13:56 142阅读 0赞

**CSS Position(定位)**  
定位的方法有4种：  
1.static定位  
2.relative定位  
3.absolute定位  
4.fixed定位  
  
**1.static定位**  
HTML元素的默认值，即没有定位，元素出现在正常的流中。  
静态定位的元素不会受到 top, bottom, left, right影响。  
  
**2.relative定位**

相对定位元素的定位是相对其正常位置。它原本所占的空间不会改变。

图解：

![Center][]

示例代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style type="text/css">
            .rel_move {
                width: 200px;
                height: 200px;
                border: 2px solid red;
                position: relative;
                left: 50px;
                top: 50px;
            }
        </style>
    
    </head>
    <body>
    <div class="rel_move">
        这个块相对于其正常位置向右移动50px，向下移动50px（相对定位）
    </div>
    </body>
    </html>

结果截图：  
![Center 1][]  
  
它原本所占的空间不会改变。

示例代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>相对定位</title>
        <style>
            h2.pos_top {
                position: relative;
                top: -50px;
            }
        </style>
    </head>
    
    <body>
    <h2>这是一个没有定位的标题</h2>
    <h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
    <p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
    </body>
    
    </html>

结果截图：  
![Center 2][]  
  
注：相对定位元素经常被用来作为绝对定位元素的容器块。  
  
**3.absolute定位**

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

图解：

![Center 3][]

示例代码（相对于<html>定位）：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style type="text/css">
            .ab_mov {
                width: 200px;
                height: 200px;
                border: 2px solid red;
                position: absolute;
                left: 50px;
                top: 50px;
            }
        </style>
    </head>
    <body>
    <div class="ab_mov">
        这个块相对于html位置向右移动50px，向下移动50px（绝对定位）
    </div>
    </body>
    </html>

结果截图：  
![Center 4][]

relative 定位和 absolute 定位示例（相对于最近的已定位父元素）：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style type="text/css">
    
            .pos_rel {
                width: 300px;
                height: 300px;
                border: 2px solid red;
                position: relative;
                left: 50px;
                top: 50px;
            }
    
            .pos_abs {
                width: 200px;
                height: 200px;
                border: 2px solid black;
                position: absolute;
                right: 50px;
                top: 50px;
            }
        </style>
    
    </head>
    <body>
    <div class="pos_rel">
        这个块相对于其正常位置向右，向下移动(相对定位)
        <div class="pos_abs">
            这个块相对于以定位的父类向右，向下移动（绝对定位）
        </div>
    </div>
    
    </body>
    </html>

结果截图：  
  
![Center 5][]  
absolute 定位使元素的位置与文档流无关，因此不占据空间。  
absolute 定位的元素和其他元素重叠。  
  
**重叠的元素**  
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素  
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）  
一个元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。  
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。  
  
  
**4.fixed定位**  
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：  
示例代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>fixed 定位</title>
        <style type="text/css">
            .pos_fixed {
                width: 200px;
                height: 200px;
                border: 2px solid red;
                position: fixed;
                right: 50px;
                bottom: 50px;
            }
        </style>
    
    </head>
    <body>
    <div class="pos_fixed">
        这个块相对于游览器定位（fixed 定位）
    </div>
    </body>
    </html>

结果截图：  
  
![Center 6][]  
注意：Fixed定位使元素的位置与文档流无关，因此不占据空间。  
Fixed定位的元素和其他元素重叠。

[Center]: /images/20220609/10dd9275d69f40fa956011e4b8691f46.png
[Center 1]: /images/20220609/3249135b38734613a03e0e086aa2b667.png
[Center 2]: /images/20220609/8bec8d853b8c4ff3a80a921e7edb8150.png
[Center 3]: /images/20220609/93a9499db4d94815a1b87e3db6995146.png
[Center 4]: /images/20220609/4dba7c13985846c395b96dfb91c8c565.png
[Center 5]: /images/20220609/f8dd3c9934e14f569c190277eeb481a9.png
[Center 6]: /images/20220609/52ec4329f9ee418b8f0e2ffa7d657579.png