粘滞定位

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">

 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7     <title>Document</title>

 8     <link rel="stylesheet" href="../CSS/reset.css">

 9     <style>

10         body{

11             height: 3000px;

12         }

13         .nav{

14             width: 1210px;

15             height: 48px;

16             background-color: #EBE7E3;

17             margin: 100px auto;

18             /*

19             粘滞定位

20               -当元素的position属性设置为sticky时则开启了元素的粘滞定位

21               -粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定

22             */

23             position: sticky;

24             top: 0;

25         }

26         .nav li{

27             /* 水平设置 */

28             float: left;

29              /* 设置li的高度

30             height: 48px; */

31             /* 将文字在父元素中垂直居中 */

32             line-height: 48px;

33

34         }

35

36         .nav a{

37             text-decoration: none;

38             color: #777;

39             font-size: 18px;

40             /* 设置为块元素 整体可点 */

41             display: block;

42

43             padding: 0 39px;

44         }

45         .nav li:last-child a{

46             padding: 0 42px 0 41px;

47         }

48         .nav li:hover{

49             background-color: #3f3f3f;

50             color: #e8e7e3;

51         }

52     </style>

53 </head>

54 <body>

55     <ul class="nav">

56         <li><a href="#">HTML/CSS</a></li>

57         <li><a href="#">Browser Side</a></li>

58         <li><a href="#">Server Side</a></li>

59         <li><a href="#">Programming</a></li>

60         <li><a href="#">XML</a></li>

61         <li><a href="#">Web Building</a></li>

62         <li><a href="#">Reference</a></li>

63     </ul>

64 </body>

65 </html>
当元素的position属性设置为sticky时则开启了元素的粘滞定位
粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
当被设置粘滞定位的元素被滚轮将要滚过页面时，会固定在已设置的位置，而不是移除屏幕，类似于导航条
（注意观察图片滑轮的位置）

           

HTML四种定位-粘滞定位的更多相关文章

  1. HTML四种常见的定位-相对定位

    相对定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...

  2. android 定位的四种方式

    [原文]  开发中对于地图及地理位置的定位是我们经常要用地,地图功能的使用使得我们应用功能更加完善,下面总结了一下网络中现有对于介绍android定位的4种方式,希望对大家有帮助: android 定 ...

  3. css四种定位

    概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...

  4. CSS四种定位及应用

    定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...

  5. HTML四种定位-固定定位

    固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...

  6. CSS定位:几种类型的position定位的元素

    当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...

  7. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  8. Netty解决粘包和拆包问题的四种方案

    在RPC框架中,粘包和拆包问题是必须解决一个问题,因为RPC框架中,各个微服务相互之间都是维系了一个TCP长连接,比如dubbo就是一个全双工的长连接.由于微服务往对方发送信息的时候,所有的请求都是使 ...

  9. C++四种类型转换方式。

    类型转换有c风格的,当然还有c++风格的.c风格的转换的格式很简单(TYPE)EXPRESSION,但是c风格的类型转换有不少的缺点,有的时候用c风格的转换是不合适的,因为它可以在任意类型之间转换,比 ...

随机推荐

  1. L1-023 输出GPLT (20 分) java题解 GPLT天梯赛防坑技巧

    上题目先 给定一个长度不超过10000的.仅由英文字母构成的字符串.请将字符重新调整顺序,按GPLTGPLT....这样的顺序输出,并忽略其它字符.当然,四种字符(不区分大小写)的个数不一定是一样多的 ...

  2. Python读取Excel表格

    前言:需要进行自动化办公或者自动化测试的朋友,可以了解下此文,掌握Python读取Excel表格的方法. 一.准备工作: 1.安装Python3.7.0(官网下载安装包) 2.安装Pycharm(官网 ...

  3. python 类方法 静态方法

    属性: 公有属性  (属于类,每个类一份) 普通属性  (属于对象,每个对象一份) 私有属性    (属于对象,跟普通属性相似,只是不能通过对象直接访问) 方法:(按作用) 构造方法 析构函数 方法: ...

  4. 【转-Andrew_qian】stm32中断嵌套全攻略

    断断续续学习STM32一学期了,时间过的好快,现在对STM32F103系列单片机的中断嵌套及外部中断做一个总结,全当学习笔记.废话不多说,ARM公司的Cortex-m3 内核,支持256个中断,其中包 ...

  5. easyDialog 简单、实用的弹出层组件

    easyDialog 简单.实用的弹出层组件 使用背景 在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的.最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找 ...

  6. 【Azure 应用服务】App Service For Linux 如何在 Web 应用实例上住抓取网络日志

    问题描述 在App Service For Windows的环境中,我们可以通过ArmClient 工具发送POST请求在Web应用的实例中抓取网络日志,但是在App Service For Linu ...

  7. Coursera Deep Learning笔记 改善深层神经网络：优化算法

    笔记:Andrew Ng's Deeping Learning视频 摘抄:https://xienaoban.github.io/posts/58457.html 本章介绍了优化算法,让神经网络运行的 ...

  8. 封装一个简单的ajax请求

    记录自己第一次封装ajax,肯定有很多考虑不周到,如有错误请指出,本人必将虚心改正. /** * * @param {Object} obj =>header:请求头:url:请求地址:meth ...

  9. MacOS安装使用Kettle

    一.环境说明 操作系统版本:macOS Big Sur 11.6.1 机型:Intel版本 JDK版本:Amazon Corretto-openjdk8 Kettle版本:Kettle8.9 二.问题 ...

  10. [火星补锅] 非确定性有穷状态决策自动机练习题Vol.1 T3 第K大区间 题解

    前言: 老火星人了 解析: 很妙的二分题.如果没想到二分答案.. 很容易想到尝试用双指针扫一下,看看能不能统计答案. 首先,tail指针右移时很好处理,因为tail指针右移对区间最大值的影响之可能作用 ...