CSS固定定位與粘性定位4大企業級案例

面兩篇文章為大家詳細講解了相對定位與絕對定位的應用場景和案例。如果想了解的可以在公眾號里面查看去看。本小節我們學習下固定定位與粘性定位的應用場景和案例。

屬性值	描述
relative 相對定位	相對于自身正常位置進行位置的調整
absolute 絕對定位	相對于其最近的定位的父元素進行位置調整。
fixed 固定定位	相對于瀏覽器窗口進行位置調整
sticky 粘性定位	是基于用戶的滾動位置來定位。

固定定位

相對于瀏覽器窗口進行定位，其它與絕對定位的特性一致。

常見的應用有：樓梯式導航、瀏覽器右側菜單、底部通欄、全屏黑色半透明遮罩彈出層、彈出注冊和登錄框、左上固定右自適應后臺管理系統布局

粘性定位

當滾動的高度>元素與瀏覽器的高度時，會以fixed固定定位顯示。
當滾動高度<元素與瀏覽器高度時，會以relative相對定位顯示。

常見的應用有：吸頂盒導航,滾動吸附效果

1、樓梯式導航、瀏覽器右側菜單、底部通欄（固定定位應用）

這三個案例用都是用固定定位來控制其與瀏覽器位置。最難是樓梯式導航的js部分

<style>
       body,ul,li{
           margin:0;
           padding: 0;
      }
       .header,.footer{
           height: 200px;
           background-color: skyblue;
      }
       .container{
           width: 1280px;
           margin:20px auto;
      }
       .container .item:nth-child(odd){
           height:600px;
           background-color:yellow;
      }
       .container .item:nth-child(even){
           height:700px;/*代碼來自-艾編程-清心*/
           background-color:darkturquoise;
      }
       ul.louti{
           list-style: none;
           width: 100px;
           padding:0px 10px;
           border: 1px solid #ddd;
           border-radius: 10px;
           background-color: #fff;
           position: fixed;/*通過固定定位來控制樓梯式導航的位置*/
           top:300px;
           left:50px;
      }
       ul.louti li{
           height: 30px;
           line-height: 30px;
           text-align: center;
           border-bottom:1px solid #ddd;
           cursor: pointer;
      }
       ul.louti li:last-child{
           border:none;
      }
       ul.louti li.current{
           background-color: palevioletred;
           color:#fff;
      }
   </style>
<body>
   <div class="header"></div>
   <div class="container">
       <div class="item">頻道內容</div>
       <div class="item">番劇內容</div>
       <div class="item">電影內容</div>
       <div class="item">國創內容</div>
       <div class="item">電視劇內容</div>
   </div>
   <div class="footer"></div>
   <ul class="louti"><!--樓梯式導航 固定定位-->
       <li class="current">頻道</li>
       <li>番劇</li>
       <li>電影</li>
       <li>國創</li>
       <li>電視劇</li>
   </ul>
</body>

<script>
   var itemTop=[];//用來保存每個區塊與頁面頂部距離
   var itemHeight=[]
   var oItem=document.querySelectorAll('.container .item')
   var oLi=document.querySelectorAll('.louti li');
   var len=oItem.length;
   var dirSpeed=20;//定義方向和速度
   var flag=-1;//提高性能優化標簽
   var scrollTop=0;//保存瀏覽器滾動高
   var timer=null;//全局定時器
   //把每個盒子與瀏覽器頂部距離,和高度分別保存到數組中
   for(var i=0;i<len ;i++){
       itemTop.push(oItem[i].offsetTop);
       itemHeight.push(oItem[i].clientHeight);
  }
   window.onscroll=function(){//滾動瀏覽器滾動條
       //獲取滾動條滾動的高度
       scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
       for(var i=0;i<len;i++){
           if(parseInt(scrollTop)<=parseInt(itemTop[i]+itemHeight[i]/3)){
               break;
          }/*代碼來自-艾編程-清心*/
      }
       if(flag!=i){//如果在當前樓層滾動，則不會重復執行代碼
           flag=i;
           for(var j=0;j<len;j++){
               oLi[j].className='';
          }
               oLi[i].className='current';
      }
  }
   for(var j=0;j<oLi.length;j++){
       oLi[j].index=j;//保存序列號，后面方便使用
       oLi[j].onclick=function(){//給導航加點擊事件
           clearInterval(timer);//清除定時器
           var that=this;//保存this
           //首先要獲取當前滾動條高度
           scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
           scrollTop>=itemTop[that.index]+itemHeight[that.index]/3?dirSpeed=-20:dirSpeed=20;
           timer=setInterval(function(){/*代碼來自-艾編程-清心*/
               scrollTop+=dirSpeed;
               if(scrollTop<=itemTop[that.index]+itemHeight[that.index]/3 && dirSpeed<0 || scrollTop>=itemTop[that.index]+itemHeight[that.index]/3 && dirSpeed>0){
                   scrollTop=itemTop[that.index]+itemHeight[that.index]/3;
                   clearInterval(timer);
              }
              (document.documentElement.scrollTop=scrollTop) || (document.body.scrollTop=scrollTop);
          },5)    
  }
}
</script>

2、視頻彈窗播放效果（固定定位應用）

這個效果中黑色的半透明遮罩層和彈出的視頻都是相對于瀏覽器來固定定位的。彈出登錄注冊框的原理和這個是一樣的。這里以相對較為復雜的視頻彈窗效是為例來講解。

<style>
       .video{
           width:300px;
           height: 200px;
      }
       .video img{
           width: 100%;
           height: 100%;
           object-fit: cover;
           cursor: pointer;
      }
       .mask{
           background-color: rgba(0,0,0,0.5);
           position: fixed;
           top:0px;
           bottom:0px;
           left:0px;
           right:0px;            
           display: none;
      }
       .mask video{
           position: fixed;
           left:50%;
           top:50%;
           transform:translateX(-50%) translateY(-50%);
      }
   </style>
<body>
   <!--視頻播放列表-->
   <div class="video"><!--data-src放著對應的視頻地址-->
       <img src='images/mz8.jpg' data-src="mp4/meizu.mp4"></video>
   </div>
   <div class="mask"><!--黑色半透明遮罩層-->
       <video src="" controls width="70%"></video><!--視頻-->
   </div>
   <script>
       var img=document.querySelector('.video img');
       var mask=document.querySelector('.mask');
       var video=document.querySelector('.mask video')
       img.onclick=function(){
           mask.style.display='block';
           video.src=this.dataset.src;//將視頻地址賦值給視頻播放器
           //視頻彈出后，立馬自動播放
           video.play();
      }
   </script>
</body>

3、左邊和頂部固定，右自適應后臺管理界面布局

（固定定位應用）

頂部導航和左側菜單相對于瀏覽器固定定位。右側的內容區則自適應瀏覽器的寬度

<style>
   body{
       margin:0;
  }
   .top{
       height: 100px;
       position: fixed;/*固定定位 要實現水平自適應，就不要加寬*/
       left:10px;
       right:10px;
       top:0px;
       background-color: pink;
       border-radius: 10px;
  }
   .siderbar{
       width: 250px;
       position: fixed;/*固定定位 要實現垂直自適應，就不要加高*/
       left:10px;
       top:110px;
       bottom:10px;
       background-color: pink;
       border-radius: 10px;
  }
   .main{
       margin:110px 10px 0px 270px;/*水平自適應，不要加寬*/
       min-height:900px;
       background-color: skyblue;
  }
</style>
<body>
   <div class="top"></div><!--頂部-->
   <div class="siderbar"></div><!--左側邊欄-->
   <div class="main"></div><!--主內容區-->
</body>

4、吸頂盒導航和常見左右吸附效果(粘性定位)

由于粘性定義目前只有火狐和Safari瀏覽器支持，但是這種效果在實際企業開發中必用。所以我們通常會用JS來實現，以下是完整效果的源碼。

<style>
   body{
       margin: 0;
       min-width: 1280px;
  }
   .top{
       height: 70px;
       width: 100%;
       background-color: #000;
  }
   .header{
       height: 100px;
       width:100%;
       background-color: pink;
       /* position: sticky; 兼容問題
      position: -webkit-sticky; */
       top:0;
       text-align: center;
       line-height: 100px;
  }
   .container{
       width: 1280px;
       margin:20px auto;
  }/*代碼來自-艾編程-清心*/
   .container .main{
       width:1000px;
       min-height: 2000px;
       background-color: #ddd;
       float:left;
  }
   .container .siderbar{
       width:250px;
       float:right;
  }
   .container .siderbar .item{
       height: 200px;
       background-color: khaki;
       margin-bottom:20px;
  }
   .container .siderbar .ceiling{
       height: 200px;
       width: 250px;
       background-color: tomato;
       /* position: sticky;
      position: -webkit-sticky; */
  }
</style>
<body>
   <div class="top"></div>
   <div class="header"></div> <!--吸附塊-->
   <div class="container">
       <div class="main"></div>
       <div class="siderbar">
           <div class="item"></div>
           <div class="item"></div>
           <div class="ceiling"></div> <!--吸附塊-->
       </div>
   </div>
   <script>
       var header=document.querySelector('.header');
       var ceiling=document.querySelector('.ceiling');
       var _top=header.offsetTop;/*元素與瀏覽器頂部距離*/
       var _top2=ceiling.offsetTop-header.clientHeight-110;//這里要記得減掉header高度和與頂部高度，因為header在前，定位后不占空間
       console.log(_top2)
       window.onscroll=function(){
           var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
           console.log(scrollTop)
           scrollTop>=_top?(header.style.position='fixed'):(header.style.position='relative');
           if(scrollTop>=_top2){/*代碼來自-艾編程-清心*/
               ceiling.style.position='fixed';/*設置固定定位*/
               ceiling.style.top="110px";/*top值*/
          }else{
               ceiling.style.position='relative';
               ceiling.style.top='0px';
          }
      }
   </script>
</body>

為幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，云服務器部署上線，從入門到精通

PC端項目開發（1個）
移動WebApp開發（2個）
多端響應式開發（1個）

共4大完整的項目開發！一行一行代碼帶領實踐開發，實際企業開發怎么做我們就是怎么做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規范，命名規范，項目代碼規范，SEO優化規范

從藍湖UI設計稿到 PC端，移動端，多端響應式開發項目開發

真機調試，云服務部署上線；
Linux環境下的 Nginx 部署，Nginx 性能優化；
Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
企業項目域名跳轉的終極解決方案，多網站、多系統部署；
使用使用 Git 在線項目部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路！

過程中【不涉及】任何費用和利益，非誠勿擾。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自頭條號！老師會邀請你進入學習，并給你發放相關資料

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程

望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統歸納過的。

【技術等級】初級

【承接文章】《CSS改變元素的定位模式，重要的樣式屬性，定位屬性詳解》

本文承接上一篇文章，繼續為大家講解上一篇中剩余的三個CSS定位屬性。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

本文介紹上一篇文章中剩余的三個CSS定位屬性，分別是：

z-index
visibility
overflow

一、設置定位元素在頁面中的前后順序：

CSS技術利用 z-index 屬性來對HTML定位元素調整在頁面中的前后順序

該屬性的取值：沒有單位的整型數字。

該屬性也被稱為定位元素的“z軸”。是指重疊定位元素的前后關系。該屬性取值數字越大越靠前；取值數字越小越靠后。

實例：設頁面中有兩個絕對定位的塊級元素，尺寸均為200px*200px。id屬性取值為first的塊級元素，背景顏色為紅色，距離頁面左上角的位置為：左側距離100px，頂部距離100px。id屬性取值為second的塊級元素，背景顏色為藍色，距離頁面左上角的位置為：左側距離150px，頂部距離150px。設置這兩個塊級元素的z軸數據。

HTML代碼如下所示：

<div id=”first”></div>
<div id=”second”></div>

CSS代碼如下所示：

#first{
width:200px; height:200px;
background-color:#ff0000;
position:absolute;
left:100px; top:100px;
z-index:1000;
}
#second{
width:200px; height:200px;
background-color:#0000ff;
position:absolute;
left:150px; top:150px;
z-index:1200;
}

上述代碼中，#first的z軸為1000，#second的z軸為1200，因此，藍色的塊級元素將覆蓋紅色的塊級元素的一部分。

二、設置定位元素的可見性：

CSS技術利用 visibility 屬性來設置HTML定位元素的可見性。

該屬性的取值如下：

visible，定位元素可見。
hidden，定位元素不可見。

新的問題：在CSS中設置定位元素不可見，有以下兩種方法。

方法一：#element{display:none;}
方法二：#element{visibility:hidden;}

上述這兩種方法都可以隱藏定位元素，那么它們的區別是什么呢？

它們的區別在于：在元素流式定位的情況下，當display屬性取值為none時，可以將對象本身和對象位置均隱藏；當visibility屬性取值為hidden時，只能隱藏對象本身，而不能隱藏對象位置，即隱藏的對象依然保留其可見時的位置。

實例：設頁面中有兩個流式定位的塊級元素，尺寸均為200px*200px。id屬性取值為first的塊級元素，背景顏色為紅色。id屬性取值為second的塊級元素，背景顏色為藍色。由于采用流式定位，所以兩個塊級元素在頁面中的布局應該是紅色的在上，藍色的在紅色的下方。

HTML代碼如下所示：

<div id=”first”></div>
<div id=”second”></div>

CSS代碼如下所示：

#first{
width:200px; height:200px;
background-color:#ff0000;
}
#second{
width:200px; height:200px;
background-color:#0000ff;
}

問題一：利用display屬性隱藏#first塊級元素。

這需要在#first的CSS代碼中加入此句：display:none;

同學們嘗試一下，此時頁面中只會出現藍色的#second塊級元素，且出現在頁面的左上角，頂替了#first塊級元素的位置。

問題二：利用visibility屬性隱藏#first塊級元素。

這需要在#first的CSS代碼中加入此句：visibility:hidden;

同學們嘗試一下，此時頁面中紅色的#first塊級元素消失，但是位置依然存在，即藍色的#second塊級元素仍舊出現在它原有的位置，并沒有頂替#first塊級元素的位置。

三、設置定位元素的溢出特性：

CSS技術利用 overflow 屬性來設置HTML定位元素的溢出特性

首先，讓我們了解一下什么叫做“溢出”：

當定位元素內部內容的量大于定位元素作為容器本身的寬高時，即容器無法再將內容全部存放在容器內部，我們說此時發生了“溢出”。

該屬性的取值如下：

visible，默認值，可見。該取值指溢出部分照常顯示。
hidden，隱藏。該取值指溢出部分隱藏。
scroll，滾動。該屬性指無論是否溢出均產生滾動條。
auto，自動。該屬性指當溢出時產生滾動條；若未發生溢出，則不產生滾動條。

實例：頁面中有一個<div></div>塊級元素，其id屬性取值為“box”，寬度和高度均為150px。在該塊級元素的內部復制了大量的文本，使得這個容器的尺寸無法完全盛放這些文本。這就發生了“溢出”現象。

HTML代碼如下所示：

<div id=”box”>大量的文本……</div>

CSS代碼如下所示：

#box{
width:150px; height:150px;
background-color:#ff5857;
text-align:justify;
font-size:14px;
text-indent:28px;
}

大家看此段CSS代碼。如果在#box塊級元素的CSS代碼中分別添加下列代碼：

overflow:hidden; 無法顯示在#box塊級元素內部的文本將隱藏。
overflow:scroll; 無法顯示在#box塊級元素內部的文本將隱藏，同時塊級元素的右側和底部出現垂直滾動條和水平滾動條。
overflow:auto; 無法顯示在#box塊級元素內部的文本將隱藏，右側將出現垂直滾動條。
overflow:visible; 無法顯示在#box塊級元素內部的文本仍舊顯示出來，就像沒有使用overflow屬性一樣。

文章預告

下一篇文章中，小海老師總結出了幾個跟定位有關的實例，帶著大家一同看一看定位屬性都有哪些應用領域，對定位技術有疑問的學習者千萬不要錯過！

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

.元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。

1）定位模式(定位的分類)

在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性的常用值：

static：自動定位（默認定位方式）
relative：相對定位，相對于其原文檔流的位置進行定位
absolute：絕對定位，相對于其上一個已經定位的父元素進行定位
fixed：固定定位，相對于瀏覽器窗口進行定位

2）邊偏移

top：頂端偏移量
bottom：底部偏移量
left：左側偏移量
right：右側偏移量

也就說，以后定位要和這邊偏移搭配使用了，比如 top: 100px; left: 30px; 等等

2.靜態定位(static)

靜態定位是所有元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態位置。所謂靜態位置就是各個元素在HTML文檔流中默認的位置。

上面的話翻譯成白話：就是網頁中所有元素都默認的是靜態定位哦！其實就是標準流的特性。

在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

靜態定位唯一的用處：就是取消定位。position: static;

3.相對定位(relative)

相對定位是將元素相對于它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位于相對位置。

對元素設置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 100px;            height: 100px;            background-color: red;            position: relative;            left: 120px;            top: 100px;        }        .dv2 {            width: 100px;            height: 100px;            background-color: blue;        }</style></head><body>    <div class="dv1"></div>    <div class="dv2"></div></body></html>

注意：

相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續占有。
其次，每次移動的位置，是以自己的左上角為基點移動（相對于自己來移動位置）

就是說，相對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它。（相對定位不脫標）

如果說浮動的主要目的是讓多個塊級元素一行顯示，那么定位的主要價值就是移動位置，讓盒子到我們想要的位置上去。

4.絕對定位(absolute)

如果文檔可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對于正常流的某一部分定位。

當position屬性的取值為absolute時，可以將元素的定位模式設置為絕對定位。

絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不占位置。

若所有父元素(祖先)都沒有定位，以瀏覽器當前屏幕為準對齊(document文檔)，相對于body。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 100px;            height: 100px;            background-color: blue;            position: absolute;            left: 130px;            top: 50px;        }        .dv2 {            width: 120px;            height: 120px;            background-color: red;        }</style></head><body>    <div class="dv1"></div>    <div class="dv2"></div></body></html>

若所有父元素(祖先)有定位，依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 120px;            height: 120px;            background-color: blue;            position: absolute;        }        .dv2 {            width: 80px;            height: 80px;            background-color: red;            position: absolute;            top: 0;        }</style></head><body>    <div class="dv1">        <div class="dv2"></div>    </div></body></html>

子絕父相

這句話的意思是子級是絕對定位的話，父級要用相對定位。

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。就是說，子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以）。但是為什么會有“子絕父相”這個詞呢？

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .parent1 {            width: 100px;            height: 100px;            background-color: red;        }        .parent2 {            width: 100px;            height: 100px;            background-color: pink;            position: relative;        }        .parent3 {            width: 100px;            height: 100px;            background-color: blue;        }        .child {            width: 50px;            height: 50px;            background-color: green;            position: absolute;            top: 20px;        }</style></head><body>    <div class="parent1"></div>    <div class="parent2">        <div class="child"></div>    </div>    <div class="parent3"></div></body></html>

因為子級是絕對定位，不會占有位置，可以放到父盒子里面的任何一個地方。

父盒子布局時，需要占有位置，因此父親只能是相對定位。

這就是子絕父相的由來。

絕對定位的盒子水平/垂直居中

設置left,top值均為50%,同時margin-left設置為絕對定位元素(要居中的元素)width的一半取負,margin-top設為其height的一半取負。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .parent {            width: 300px;            height: 200px;            background-color: blue;            position: relative;        }        .child {            width: 100px;            height: 70px;            background-color: red;            position: absolute;            left: 50%;            top: 50%;            margin-left: -50px;            margin-top: -40px;        }</style></head><body>    <div class="parent">        <div class="child"></div>    </div></body></html>

5.固定定位(fixed)

固定定位是絕對定位的一種特殊形式，類似于正方形是一個特殊的矩形。它以瀏覽器窗口作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。

當對元素設置固定定位后，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點：

固定定位的元素跟父親沒有任何關系，只認瀏覽器。
固定定位完全脫標，不占有位置，不隨著滾動條滾動。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 50px;            height: 50px;            background-color: red;            position: fixed;            right: 50px;            bottom: 50px;        }        .dv2 {            width: 50px;            height: 2000px;            background-color: blue;        }</style></head><body>    <div class="dv1"></div>    <div class="dv2"></div></body></html>

6.四種定位總結

在線咨詢

上一篇：Electron+Vue3.2+TypeScript
下一篇：糖果消消消Candy Block Breaker評測

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS固定定位與粘性定位4大企業級案例

1、樓梯式導航、瀏覽器右側菜單、底部通欄（固定定位應用）

2、視頻彈窗播放效果（固定定位應用）

3、左邊和頂部固定，右自適應后臺管理界面布局

（固定定位應用）

4、吸頂盒導航和常見左右吸附效果(粘性定位)

望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統歸納過的。

問題一：利用display屬性隱藏#first塊級元素。

問題二：利用visibility屬性隱藏#first塊級元素。

文章預告

小海教材

小海聲明

.元素的定位屬性

1）定位模式(定位的分類)

2）邊偏移

2.靜態定位(static)

3.相對定位(relative)

4.絕對定位(absolute)

5.固定定位(fixed)

6.四種定位總結

您的項目需求