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.四种定位总结

您的项目需求