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

来源:https://www.cnblogs.com/zhai1997/archive/2020/06/21/13170772.html
-Advertisement-
Play Games

1、定位 （1）定位 將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子 （2）定位的作用 某一個元素可以自由的在一個盒子內部移動，並且壓住其他盒子（使用標準流或者浮動很難實現） 定位可以讓元素固定屏幕中的某個位置，並且可以壓住其他盒子 （3）定位的組成 定位=定位模式+邊偏移 定 ...


1、定位

（1）定位

將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子

（2）定位的作用

某一個元素可以自由的在一個盒子內部移動，並且壓住其他盒子（使用標準流或者浮動很難實現）

定位可以讓元素固定屏幕中的某個位置，並且可以壓住其他盒子

（3）定位的組成

定位=定位模式+邊偏移

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

（4）定位模式

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

（5）邊偏移

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

 

2、

（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不支持


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Docker Dockerfile 指令詳解與實戰案例
    Dockerfile介紹及常用指令，包括FROM，RUN，還提及了 COPY，ADD，EXPOSE，WORKDIR等，其實 Dockerfile 功能很強大，它提供了十多個指令。 ...
  • 006.OpenShift持久性存儲
    一 持久存儲 1.1 持久存儲概述 預設情況下，運行容器使用容器內的臨時存儲。Pods由一個或多個容器組成，這些容器一起部署，共用相同的存儲和其他資源，可以在任何時候創建、啟動、停止或銷毀。使用臨時存儲意味著，當容器停止時，寫入容器內的文件系統的數據將丟失。 當容器在停止時也需要持久的保存數據時，O ...
  • Nginx 如何自定義變數？
    之前的兩篇文章 Nginx 變數介紹以及利用 Nginx 變數做防盜鏈 講的是 Nginx 有哪些變數以及一個常見的應用。那麼如此靈活的 Nginx 怎麼能不支持自定義變數呢，今天的文章就來說一下自定義變數的幾個模塊以及 Nginx 的 keepalive 特性。 通過映射新變數提供更多的可能性：m ...
  • FlinkSQL源碼閱讀-schema管理
    在Flink SQL中， 元數據的管理分為三層: catalog-> database-> table， 我們知道Flink SQL是依托calcite框架來進行SQL執行樹生產，校驗，優化等等， 所以本文講介紹FlinkSQL是如何來結合Calcite來進行元數據管理的. calcite開放的介面 ...
  • 游標
    一個對錶進行查詢的SQL語句通常都會產生一組記錄，稱為結果集。但是許多應用程式，尤其PL/SQL嵌入式的主語言（如java,C等），通常並不能把整個結果集作為一個單元來處理，因此，這些應用程式需要一種機制來保證每次只處理結果集中的一行或幾行，游標就提供了這種機制，即對一個結果集進行逐行處理的能力。 ...
  • 在Docker中運行PostgreSQL + pgAdmin 4
    拉取postgresql鏡像：docker pull postgres 運行postgresql：docker run -d -p 5432:5432 --name postgresql -v pgdata:/var/lib/postgresql/data -e POSTGRES_PASSWORD= ...
  • sql server如何通過pivot對數據進行行列轉換（進階）
    腳本： /* 說明：sql server如何通過pivot對數據進行行列轉換（進階），用於員工業績按月龍虎排行榜、客戶銷售金額按月排行榜等 腳本來源：https://www.cnblogs.com/zhang502219048/p/13173228.html 作者：zhang502219048 作者 ...
  • 分享2個近期遇到的MySQL資料庫的BUG案例
    近一個月處理歷史數據問題時，居然連續遇到了2個MySQL BUG，分享給大家一下，也歡迎指正是否有問題。 BUG1： 資料庫版本： MySQL5.7.25 - 28 操作系統： Centos 7.7（不重要） 資料庫架構： 主-從-級聯從 資料庫參數： innodb_support_xa = 1 # ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類