定位是什麼，元素怎麼顯示隱藏

冰山一樹Sankey發表於2022-03-12

歡迎大家去部落格冰山一樹Sankey，瀏覽效果更好。直接右上角搜尋該標題即可
冰山一樹Sankey

部落格園主頁：部落格園主頁-冰山一樹Sankey
CSDN主頁：CSDN主頁-冰山一樹Sankey

前端學習：學習地址：黑馬程式設計師pink老師前端入門教程，零基礎必看的h5(html5)+css3+移動，下面這些都是一些學習筆記。臨淵羨魚，不如退而結網！！願我自己學有所成，也願每個前端愛好者學有所成

一. 定位

1.1 為什麼需要定位

提問： 以下情況使用標準流或者浮動能實現嗎？

  1. 某個元素可以自由的在一個盒子內移動位置，並且壓住其他盒子.

image-20220309185411399

  1. 當我們滾動視窗的時候，盒子是固定螢幕某個位置的。

image-20220309185438547

以上效果，標準流或浮動都無法快速實現，此時需要定位來實現。
浮動與定位區別：

  1. 浮動可以讓多個塊級盒子一行沒有縫隙排列顯示， 經常用於橫向排列盒子。
  2. 定位則是可以讓盒子自由的在某個盒子內移動位置或者固定螢幕中某個位置，並且可以壓住其他盒子。

1.2 定位組成

定位：將盒子定在某一個位置，所以定位也是在擺放盒子， 按照定位的方式移動盒子。
定位 = 定位模式 + 邊偏移 。
定位模式用於指定一個元素在文件中的定位方式。邊偏移則決定了該元素的最終位置。

定位模式：

定位模式決定元素的定位方式 ，它通過 CSS 的 position 屬性來設定，其值可以分為四個：

值 語義
static 靜態定位
relative 相對定位
absolute 絕對定位
fixed 固定定位

邊偏移：

邊偏移就是定位的盒子移動到最終位置。有 top、bottom、left 和 right 4 個屬性。

邊偏移屬性 示例 描述
top top:80px 頂端偏移量,定義元素相對於其父元素上邊線的距離。
bottom bottom:80px 底部偏移量,定義元素相對於其父元素下邊線的距離。
left left:80px 左側偏移量,定義元素相對於其父元素左邊線的距離。
right right:80px 右側偏移量,定義元素相對於其父元素右邊線的距離

1.3 靜態定位

靜態定位是元素的預設定位方式，無定位的意思。
語法：

選擇器 { position: static; }
  • 靜態定位按照標準流特性擺放位置，它沒有邊偏移
  • 靜態定位在佈局時很少用到

1.4 相對定位

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

語法：

選擇器 { position: relative; }

相對定位的特點：

  1. 它是相對於自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。
  2. 原來在標準流的位置繼續佔有，後面的盒子仍然以標準流的方式對待它。
    因此，相對定位並沒有脫標。它最典型的應用是給絕對定位當爹的。。。

1.5 絕對定位

絕對定位是元素在移動位置的時候，是相對於它祖先元素來說的（拼爹型）。

語法：

選擇器 { position: absolute; }

絕對定位的特點：

  1. 如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準定位（Document 文件）。
  2. 如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。
  3. 絕對定位不再佔有原先的位置。所以絕對定位是脫離標準流的。

1.6 子絕父相

“子絕父相”是定位中最常用的一種方式，這句話的意思是：子級是絕對定位的話，父級要用相對定位。

  • 子級絕對定位，不會佔有位置，可以放到父盒子裡面的任何一個地方，不會影響其他的兄弟盒子。
  • 父盒子需要加定位限制子盒子在父盒子內顯示。
  • 父盒子佈局時，需要佔有位置，因此父親只能是相對定位。

總結： 因為父級需要佔有位置，因此是相對定位， 子盒子不需要佔有位置，則是絕對定位
當然，子絕父相不是永遠不變的，如果父元素不需要佔有位置，子絕父絕也會遇到。

1.7 固定定位

固定定位是元素固定於瀏覽器可視區的位置。主要使用場景： 可以在瀏覽器頁面滾動時元素的位置不會改變。

語法：

選擇器 { position: fixed; }

固定定位的特點：

  1. 以瀏覽器的可視視窗為參照點移動元素。
    • 跟父元素沒有任何關係
    • 不隨滾動條滾動。
  2. 固定定位不在佔有原先的位置。

固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位。

固定定位小技巧： 固定在版心右側位置。

image-20211119131223253

小演算法：

  1. 讓固定定位的盒子 left: 50%. 走到瀏覽器可視區（也可以看做版心） 的一半位置。
  2. 讓固定定位的盒子 margin-left: 版心寬度的一半距離。 多走 版心寬度的一半位置
    就可以讓固定定位的盒子貼著版心右側對齊了。
 position: fixed;
 /* 1. 走瀏覽器寬度的一半 */
 left: 50%;
 /* 2. 利用margin 走版心盒子寬度的一半距離 */
 margin-left: 405px;

1.8 粘性定位

粘性定位可以被認為是相對定位和固定定位的混合。 Sticky 粘性的
語法：

選擇器 { position: sticky; top: 10px; }

粘性定位的特點：

  1. 以瀏覽器的可視視窗為參照點移動元素（固定定位特點）
  2. 粘性定位佔有原先的位置（相對定位特點）
  3. 必須新增 top 、left、right、bottom 其中一個才有效
    跟頁面滾動搭配使用。 相容性較差，IE 不支援。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>粘性定位</title>
    <style>
        body {
            height: 3000px;
        }
        .nav {
            /* 粘性定位 */
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="nav">我是導航欄</div>
</body>
</html>

image-20211119132423592

當滑動頁面到當這個盒子TOP=0後，變成固定定位，保持也頁面上方

定位總結

image-20220309190411189

1.9 定位疊放次序 z-index

在使用定位佈局時，可能會出現盒子重疊的情況。此時，可以使用 z-index 來控制盒子的前後次序 (z軸)

語法：

選擇器 { z-index: 1; }
  • 數值可以是正整數、負整數或 0, 預設是 auto，數值越大，盒子越靠上
  • 如果屬性值相同，則按照書寫順序，後來居上
  • 數字後面不能加單位
  • 只有定位的盒子才有 z-index 屬性

二. 定位的擴充

2.1 絕對定位的盒子居中

加了絕對定位的盒子不能通過 margin:0 auto; 水平居中，但是可以通過以下計算方法實現水平和垂直居中。

① left: 50%;：讓盒子的左側移動到父級元素的水平中心位置。
② margin-left: -100px;：讓盒子向左移動自身寬度的一半。

.box {
position: absolute;
/* 1. left 走 50%  父容器寬度的一半 */
left: 50%;
/* 2. margin 負值 往左邊走 自己盒子寬度的一半 */
margin-left: -100px;
/*垂直居中
top: 50%;
margin-top: -100px;

width: 200px;
height: 200px;
background-color: pink;
/* margin: auto; */
}

2.2. 定位特殊特性

絕對定位和固定定位也和浮動類似。

  1. 行內元素新增絕對或者固定定位，可以直接設定高度和寬度。
  2. 塊級元素新增絕對或者固定定位，如果不給寬度或者高度，預設大小是內容的大小
  3. 浮動元素、絕對定位(固定定位）元素的都不會觸發外邊距合併(外邊距塌陷 )的問題。

2.3 絕對定位（固定定位）會完全壓住盒子

浮動元素不同，只會壓住它下面標準流的盒子，但是不會壓住下面標準流盒子裡面的文字（圖片）
但是絕對定位（固定定位） 會壓住下面標準流所有的內容。
浮動之所以不會壓住文字，因為浮動產生的目的最初是為了做文字環繞效果的。 文字會圍繞浮動元素

image-20220309190807846

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位會完全壓住標準流盒子內容</title>
    <style>
        .box {
            /* 1.浮動的元素不會壓住下面標準流的文字 */
            /* float: left; */
            /* 2. 絕對定位（固定定位） 會壓住下面標準流所有的內容。 */
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>閣下何不同風起，扶搖直上九萬里</p>
</body>
</html>

總結

通過盒子模型，清楚知道大部分html標籤是一個盒子。

通過CSS浮動、定位 可以讓每個盒子排列成為網頁。

一個完整的網頁，是標準流、浮動、定位一起完成佈局的，每個都有自己的專門用法。

  1. 標準流
    可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標準流佈局。
  2. 浮動
    可以讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動佈局。
  3. 定位
    定位最大的特點是有層疊的概念，就是可以讓多個盒子前後疊壓來顯示。如果元素自由在某個盒子內移動就
    用定位佈局。

三. 元素的顯示與隱藏

類似網站廣告，當我們點選關閉就不見了，但是我們重新重新整理頁面，會重新出現！
本質：讓一個元素在頁面中隱藏或者顯示出來。

  1. display 顯示隱藏
  2. visibility 顯示隱藏
  3. overflow 溢位顯示隱藏

3.1 display 屬性

display 屬性用於設定一個元素應如何顯示。

  • display: none ；隱藏物件
  • display：block ；除了轉換為塊級元素之外，同時還有顯示元素的意思

display 隱藏元素後，不再佔有原來的位置。
後面應用及其廣泛，搭配 JS 可以做很多的網頁特效。

3.2 visibility 可見性

visibility 屬性用於指定一個元素應可見還是隱藏。

  • visibility：visible ; 元素可視
  • visibility：hidden; 元素隱藏

visibility 隱藏元素後，繼續佔有原來的位置。
如果隱藏元素想要原來位置， 就用 visibility：hidden
如果隱藏元素不想要原來位置， 就用 display：none (用處更多 重點）

3.3 overflow 溢位

overflow 屬性指定了如果內容溢位一個元素的框（超過其指定高度及寬度） 時，會發生什麼。

屬性值 描述
visible 不剪下內容也不新增滾動條
hidden 不顯示超過物件尺寸的內容,超出的部分隱藏掉
scroll 不管超出內容否,總是顯示滾動條
auto 超出自動顯示滾動條,不超出不顯示滾動條

一般情況下，我們都不想讓溢位的內容顯示出來，因為溢位的部分會影響佈局。

但是如果有定位的盒子， 請慎用overflow:hidden 因為它會隱藏多餘的部分。

3.4 土豆網滑鼠經過顯示遮罩

image-20220309191603210

土豆網滑鼠經過顯示遮罩
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿土豆網顯示隱藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            /* 隱藏遮罩層 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 當我們滑鼠經過了 土豆這個盒子，就讓裡面遮罩層顯示出來 */
        .tudou:hover .mask {
            /* 而是顯示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

</html>

相關文章