0
0

css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别

绝对定位，相对定位，固定定位和粘性定位的特性及区别，我整理一下放在文章最下面了，不用死记硬背，理解一下就ok,需要的话可以看看。

当导航栏头部没有别的模块时，想要滑动过程中导航栏一直在顶部，有两种写法

1.粘性定位（position: sticky;）

效果图：

css全部代码：

  1. * {
  2.                 margin: 0;
  3.                 padding: 0;
  4.             }
  6.             li {
  7.                 list-style: none;
  8.             }
  10.             a {
  11.                 text-decoration: none;
  12.                 color: white;
  13.             }
  15.             .wrapper {
  16.                 width: 100%;
  17.                 height: 5000px;
  18.                 /* 圆形边框 */
  19.             }
  21.             .box {
  22.                 width: 1250px;
  23.                 margin: 0 auto;
  24.                 background-color: dimgray;
  25.                 height: 50px;
  26.                 border: 1px solid white;
  27.                 border-radius: 20px 20px;
  28.                 position: sticky;
  29.                 top: 0;
  30.                 /* 固定在距离顶部0px处 */
  31.             }
  33.             .box>ul>li {
  34.                 float: left;
  35.                 position: relative;
  36.             }
  38.             .nav {
  39.                 width: 1200px;
  40.                 margin: 0 auto;
  41.             }
  43.             .box ul li {
  44.                 height: 50px;
  45.                 line-height: 50px;
  46.                 width: 200px;
  47.                 background-color: dimgrey;
  48.                 text-align: center;
  49.                 font-weight: bolder;
  50.                 border-radius: 20px 20px;
  51.             }
  53.             .nav li:nth-of-type(2) ul {
  54.                 display: none;
  55.                 /* 隐藏二级菜单*/
  56.                 position: absolute;
  57.             }
  59.             .nav li:hover>a {
  60.                 color: darkred;
  61.             }
  63.             /* 鼠标悬浮字体变色 */
  65.             .nav li:nth-of-type(2):hover .second {
  66.                 display: block;
  67.                 /* 鼠标悬浮显示二级菜单*/
  68.             }
  70.             .third {
  71.                 position: absolute;
  72.                 top: 100px;
  73.                 left: 200px;
  74.                 display: none;
  75.                 /* 隐藏三级菜单 */
  76.             }
  78.             .second li:nth-of-type(3):hover ul {
  79.                 display: block;
  80.                 /* 鼠标悬浮显示三级菜单*/
  81.             }

html:全部代码

  1. <div class="wrapper">
  2.             <div class="box">
  3.                 <ul class="nav">
  4.                     <li><a href="#">首页</a></li>
  5.                     <li><a href="#">网上工作室</a>
  6.                         <ul class="second">
  7.                             <li><a href="#">游客</a></li>
  8.                             <li><a href="#">工作人员</a></li>
  9.                             <li><a href="#">管理层</a>
  10.                                 <ul class="third">
  11.                                     <li><a href="#">普通管理层</a></li>
  12.                                     <li><a href="#">vip</a></li>
  13.                                     <li><a href="#">svip</a></li>
  14.                                 </ul>
  15.                             </li>
  16.                         </ul>
  17.                     </li>
  18.                     <li><a href="#">交流圈</a></li>
  19.                     <li><a href="#">登录</a></li>
  20.                     <li><a href="#">注册</a></li>
  21.                     <li><a href="#">联系我们</a></li>
  22.                 </ul>
  23.             </div>
  24.         </div>

2.固定定位（position: fixed;）并且，我们发现margin: 0 auto;失效了，也就是说，使用固定定位和绝对定位都会脱离标准文档流，使margin: 0 auto;失效。

效果图：

css全部代码：

  1. * {
  2.                 margin: 0;
  3.                 padding: 0;
  4.             }
  6.             li {
  7.                 list-style: none;
  8.             }
  10.             a {
  11.                 text-decoration: none;
  12.                 color: white;
  13.             }
  15.             .wrapper {
  16.                 width: 100%;
  17.                 height: 5000px;
  18.                 /* 圆形边框 */
  19.             }
  20.             /* .header{
  21.                 width: 100%;
  22.                 height: 500px;
  23.                 background-color: burlywood;
  24.             } */
  26.              .box {
  27.                 width: 1250px;
  28.                 /* margin: 0 auto; */
  29.                 background-color: dimgray;
  30.                 height: 50px;
  31.                 border: 1px solid white;
  32.                 border-radius: 20px 20px;
  33.                 position:fixed;
  34.                 top: 0;
  35.                 /* 固定在距离顶部0px处 */
  36.             }
  38.             .box>ul>li {
  39.                 float: left;
  40.                 position: relative;
  41.             }
  43.             .nav {
  44.                 width: 1200px;
  45.                 margin: 0 auto;
  46.             }
  48.             .box ul li {
  49.                 height: 50px;
  50.                 line-height: 50px;
  51.                 width: 200px;
  52.                 background-color: dimgrey;
  53.                 text-align: center;
  54.                 font-weight: bolder;
  55.                 border-radius: 20px 20px;
  56.             }
  58.             .nav li:nth-of-type(2) ul {
  59.                 display: none;
  60.                 /* 隐藏二级菜单*/
  61.                 position: absolute;
  62.             }
  64.             .nav li:hover>a {
  65.                 color: darkred;
  66.             }
  68.             /* 鼠标悬浮字体变色 */
  70.             .nav li:nth-of-type(2):hover .second {
  71.                 display: block;
  72.                 /* 鼠标悬浮显示二级菜单*/
  73.             }
  75.             .third {
  76.                 position: absolute;
  77.                 top: 100px;
  78.                 left: 200px;
  79.                 display: none;
  80.                 /* 隐藏三级菜单 */
  81.             }
  83.             .second li:nth-of-type(3):hover ul {
  84.                 display: block;
  85.                 /* 鼠标悬浮显示三级菜单*/
  86.             }

html全部代码：

  1. <div class="wrapper">
  2.             <!-- <div class="header"></div> -->
  3.             <div class="box">
  4.                 <ul class="nav">
  5.                     <li><a href="#">首页</a></li>
  6.                     <li><a href="#">网上工作室</a>
  7.                         <ul class="second">
  8.                             <li><a href="#">游客</a></li>
  9.                             <li><a href="#">工作人员</a></li>
  10.                             <li><a href="#">管理层</a>
  11.                                 <ul class="third">
  12.                                     <li><a href="#">普通管理层</a></li>
  13.                                     <li><a href="#">vip</a></li>
  14.                                     <li><a href="#">svip</a></li>
  15.                                 </ul>
  16.                             </li>
  17.                         </ul>
  18.                     </li>
  19.                     <li><a href="#">交流圈</a></li>
  20.                     <li><a href="#">登录</a></li>
  21.                     <li><a href="#">注册</a></li>
  22.                     <li><a href="#">联系我们</a></li>
  23.                 </ul>
  24.             </div>
  25.         </div>

当导航栏头部有其他模块，想要滑动过程中，导航栏滑动与顶部零间距之后固定。

使用粘性定位滑动过程中与页面顶端不会产生空间，但此时，如果使用固定定位，那就真的会栓Q了，问题不大，就是效果不一样，可以试试。

使用粘性定位效果图：

css代码：

  1. * {
  2.                 margin: 0;
  3.                 padding: 0;
  4.             }
  6.             li {
  7.                 list-style: none;
  8.             }
  10.             a {
  11.                 text-decoration: none;
  12.                 color: white;
  13.             }
  15.             .wrapper {
  16.                 width: 100%;
  17.                 height: 5000px;
  18.                 /* 圆形边框 */
  19.             }
  20.             .header{
  21.                 width: 100%;
  22.                 height: 500px;
  23.                 background-color: burlywood;
  24.             }
  26.              .box {
  27.                 width: 1250px;
  28.                 margin: 0 auto;
  29.                 background-color: dimgray;
  30.                 height: 50px;
  31.                 border: 1px solid white;
  32.                 border-radius: 20px 20px;
  33.                 position: sticky;
  34.                 top: 0;
  35.                 /* 固定在距离顶部0px处 */
  36.             }
  38.             .box>ul>li {
  39.                 float: left;
  40.                 position: relative;
  41.             }
  43.             .nav {
  44.                 width: 1200px;
  45.                 margin: 0 auto;
  46.             }
  48.             .box ul li {
  49.                 height: 50px;
  50.                 line-height: 50px;
  51.                 width: 200px;
  52.                 background-color: dimgrey;
  53.                 text-align: center;
  54.                 font-weight: bolder;
  55.                 border-radius: 20px 20px;
  56.             }
  58.             .nav li:nth-of-type(2) ul {
  59.                 display: none;
  60.                 /* 隐藏二级菜单*/
  61.                 position: absolute;
  62.             }
  64.             .nav li:hover>a {
  65.                 color: darkred;
  66.             }
  68.             /* 鼠标悬浮字体变色 */
  70.             .nav li:nth-of-type(2):hover .second {
  71.                 display: block;
  72.                 /* 鼠标悬浮显示二级菜单*/
  73.             }
  75.             .third {
  76.                 position: absolute;
  77.                 top: 100px;
  78.                 left: 200px;
  79.                 display: none;
  80.                 /* 隐藏三级菜单 */
  81.             }
  83.             .second li:nth-of-type(3):hover ul {
  84.                 display: block;
  85.                 /* 鼠标悬浮显示三级菜单*/
  86.             }

html代码：

  1. <div class="wrapper">
  2.             <div class="header"></div>
  3.             <div class="box">
  4.                 <ul class="nav">
  5.                     <li><a href="#">首页</a></li>
  6.                     <li><a href="#">网上工作室</a>
  7.                         <ul class="second">
  8.                             <li><a href="#">游客</a></li>
  9.                             <li><a href="#">工作人员</a></li>
  10.                             <li><a href="#">管理层</a>
  11.                                 <ul class="third">
  12.                                     <li><a href="#">普通管理层</a></li>
  13.                                     <li><a href="#">vip</a></li>
  14.                                     <li><a href="#">svip</a></li>
  15.                                 </ul>
  16.                             </li>
  17.                         </ul>
  18.                     </li>
  19.                     <li><a href="#">交流圈</a></li>
  20.                     <li><a href="#">登录</a></li>
  21.                     <li><a href="#">注册</a></li>
  22.                     <li><a href="#">联系我们</a></li>
  23.                 </ul>
  24.             </div>
  25.         </div>

相对定位： position: relative;

    1.                       没有脱离标准文档流
    1.                       层级自动提高，会覆盖浮动元素
    1.                        left:距离左边移动
    1.                        right:距离右边移动
    1.                        top:距离上边移动
    1.                        bottom:距离下边移动

绝对定位:position: absolute;

absolute 布局的关键点选择哪一个元素作为布局区域，如果元素的所有父元素均未设置 position 属性（值为 static），布局区域会选择可视区域。

    1.                      如果祖先元素没有定位，相对于浏览器定位
    1.                      如果祖先元素有定位,相对于"最近的"定位的祖先元素 定位
    1.                      绝对定位会脱离标准文档流，影响下边的元素
    1.                      绝对定位找参照祖先元素，应该用relative
    1.                      经过绝对定位的元素会变成行内块元素

固定定位：position:fixed;

  • 不占据空间，固定定位是脱离标准流。
  • 以浏览器的可视窗口为参照点移动元素。
  • 跟父元素没有任何关系。
  • 不随滚动条滚动

粘性定位：position:sticky;

  • 以浏览器的可视窗口为参照点移动元素。
  • 占有原先的位置。
  • 必须添加top、left、right、bottom其中一个才有效。
  • 兼容性差，IE不支持，不常用。
  • 粘性定位并不会 脱离文档流

层级关系 ： 定位层级>浮动层级>标准文档流的层级

标签： css css3 html
本文转载自: https://blog.csdn.net/m0_71491195/article/details/125899407
版权归原作者 不~古 所有， 如有侵权，请联系我们删除。
登录后发布评论

“css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。