CSS：定位（靜態、相對、絕對、固定、粘性）

時間  2020-06-22
標籤 css 定位 靜態 相對 絕對 固定 粘性 欄目 CSS 简体版
原文   原文鏈接

一、定位css

（1）定位html

將盒子定在某一個位置，因此定位也是在擺放盒子，按照定位的方式移動盒子瀏覽器

（2）定位的做用佈局

某一個元素能夠自由的在一個盒子內部移動，而且壓住其餘盒子（使用標準流或者浮動很難實現）spa

定位可讓元素固定屏幕中的某個位置，而且能夠壓住其餘盒子3d

（3）定位的組成code

定位=定位模式+邊偏移htm

定位模式用於指定一個元素在文檔中的定位方式，邊偏移則決定了該元素的最終位置blog

（4）定位模式圖片

定位模式決定元素的定位方式，它經過CSS的position屬性來設置，它的值能夠分爲四個：static(靜態定位)，relative（相對定位），absolute（絕對定位），fixed（固定定位）

（5）邊偏移

有top、bottom、left、right四個屬性

 

二、

（1）靜態定位

靜態定位是元素的默認定位方式，無定位的意思。靜態定位按照標準流特徵擺放位置，他沒有邊偏移，不多使用

（2）相對定位

元素在移動位置的時候，是相對於它原來的位置來講的

定義相對定位以前：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test{
                height: 100px;
                width: 200px;
                background-color: black;
            }
        </style>
    </head>

    <body>
        <div class="test"></div>
    </body>

</html>

長方形是緊貼上邊緣顯示的

定義相對定位：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test{
                height: 100px;
                width: 200px;
                background-color: black;
                position: relative;
                top:100px;
            }
        </style>
    </head>

    <body>
        <div class="test"></div>
    </body>

</html>

長方形的位置相對於原來的位置發生了變化，可是他依舊是標準流。

（3）絕對定位

元素在移動位置的時候是相對於祖先元素來講的，若是沒有祖先元素或者祖先元素沒有定位，則以瀏覽器爲準

沒有父元素：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test{
                height: 100px;
                width: 200px;
                background-color: black;
                position: absolute;
                top:100px;
                left: 200px;
            }
        </style>
    </head>

    <body>
        <div class="test"></div>
    </body>

</html>

 

 有父元素，可是該父元素沒有定位：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test{
                height: 100px;
                width: 200px;
                background-color: black;
                position: absolute;
                top:100px;
                left: 200px;
            }
            .big{
                height: 400px;
                width: 400px;
                background-color: #ffffcc;
                margin: 0 auto;
            }
        </style>
    </head>

    <body>
        <div class="big">
            <div class="test"></div>
        </div>
    </body>
</html>

 

 有父元素，而且該父元素有定位：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test{
                height: 100px;
                width: 200px;
                background-color: black;
                position: absolute;
                top:100px;
                left: 200px;
            }
            .big{
                height: 400px;
                width: 400px;
                background-color: #ffffcc;
                margin: 0 auto;
                position: absolute;
                top: 100px;
            }
        </style>
    </head>

    <body>
        <div class="big">
            <div class="test"></div>
        </div>
    </body>
</html>

 

 若是祖先元素有定位（不包括絕對定位），則以最近一級的定位爲參考點來移動位置：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test {
                height: 100px;
                width: 200px;
                background-color: black;
                position: absolute;
                top: 100px;
                left: 200px;
            }
            
            .big {
                height: 400px;
                width: 400px;
                background-color: #ffffcc;
                margin: 0 auto;
                position: absolute;
                top: 100px;
            }
            
            .biggest {
                height: 500px;
                width: 600px;
                position: absolute;
                margin: 0 auto;
                top: 100px;
                background-color: #fffcf5;
            }
        </style>
    </head>

    <body>
        <div class="biggest">
            <div class="big">
                <div class="test"></div>
            </div>
        </div>

    </body>

</html>

 

 若是最近的一級父元素沒有，則再向上一級去查找，若是都沒有定位，就以瀏覽器爲準。

絕對定位是脫離標準流的，再也不佔有原來的位置。這也就意味着，父元素不能加絕對定位，若是加了絕對定位父元素下的佈局就會佔用父元素的位置，頁面的結構就會亂掉。所以，父元素的佈局須要佔有位置，要使用絕對定位，而子元素可使用相對定位，就能夠在父元素內部自由移動了。

（4）固定定位

元素固定於瀏覽器的可視區的位置，在瀏覽頁面的時候元素的位置不變。

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test {
                position: fixed;
                top: 100px;
                left: 200px;
            }
        </style>
    </head>

    <body>
        <div class="test">
            <img src="img/1.png" />
        </div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
    </body>
</html>

 

 在翻閱瀏覽器的時候，圖片是固定不動的，文字隨着瀏覽器的滾動而滾動

固定定位的特色，以瀏覽器的可視化窗口爲參考點移動元素，跟父元素沒有任何關係，不隨滾動條滾動，固定定位再也不佔有原來的位置

（5）粘性定位

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test {
                position: sticky;
                margin-top: 100px;
                top: 10px;
            }
        </style>
    </head>

    <body>
        <div class="test">
            <img src="img/1.png" />
        </div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
    </body>
</html>

 

 

 

 在滾動瀏覽器的，滾動到距離上邊沿10px的時候圖片就不動了，而在這以前會隨着瀏覽器的滾動而滾動。

粘性定位的特色：以瀏覽器的可視化窗口爲參考點移動元素；佔有原來的位置；必須加上top、left、right、bottom中的一個纔有效；IE不支持

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程