浮动与定位的使用(结合案例版)

明月几时有666

于 2022-08-29 11:36:53 发布

阅读量990

点赞数 4

分类专栏： # CSS 文章标签：浮动定位相对定位绝对定位固定定位

本文链接：https://blog.csdn.net/gao_zhennan/article/details/126087015

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言：本文章内容基于某平台的视频课程，该课程中老师的讲解通俗易懂且非常实用、详细。相信有童鞋已经在网上对相关内容做了笔记，但是，大部分都缺乏应用案例，只适合自己复习使用。本文在介绍了某个浮动或定位技术后，会在本站CSDN上找到使用了相应技术的实现案例，带你手把手”实现CSDN“。另外，本文也会总结我个人在学习中遇到的问题和解决办法，并添加一些拓展知识。让我们开始把~

一、预备知识

1. 标准文档流

正常布局流是一套在浏览器视口内放置、组织元素的规则。

默认的，块级元素按照其父元素的块流动方向 (block flow direction)放置：每个块级元素会在上一个元素下面另起的一行，它们会被设置好的外边距进行分隔。在水平书写模式下，块级元素垂直排列。

内联元素不会另起一行；只要其父块级元素的宽度空间足够，它们与其他内联元素、相邻的文本内容被排列在同一行上，如果宽度空间不够，溢出的文本或元素将移到新的一行。

完整的详细的介绍，参考“CSS 标准流”

2. BFC

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：

包含内部浮动
排除外部浮动
阻止外边距重叠

参考“块格式化上下文”

3、盒子模型

标准模型

在这里插入图片描述

IE模型

在这里插入图片描述

标准盒模型中，盒模型的宽高只是内容（content）的宽高;
IE盒模型中，盒模型的宽高指的是，内容（content) + 内边距（padding) + 边框（border）的总宽高。

CSS代码

box-sizing:content-box; // 标准模型(默认)
box-sizing: border-box; // IE模型

参考“CSS盒模型”

另外，有一篇介绍CSS盒模型的W3C官方英文文档，写的非常详细，如果感兴趣可以看下“The CSS Box Model”

二、浮动

1. 本质功能

浮动最本质的功能，是用来实现并排

如下图所示：存在三个div元素，默认情况下，在标准文档流中每个div元素独占一行，应该竖直排列显示。当对它们应用左浮动或者右浮动样式后，就可以实现并排显示。
在这里插入图片描述

2. 左浮动和右浮动

float: left; 可以设置左浮动

按照在标准流中的顺序进行浮动，可以看到，浮动后并排显示的盒子和浮动前竖直显示的盒子的先后顺序相同。

在这里插入图片描述
float: right; 可以设置右浮动

按照在标准文档流中的顺序进行浮动，可以看到，浮动后并排显示的盒子和浮动前竖直显示的盒子的先后顺序相反。

一般地，如果父盒子包裹子盒子，子盒子需要浮动且只向一个方向浮动，会选择左浮动。

在这里插入图片描述

3. 使用要点

如果要使用浮动使元素并排显示，并排的盒子都要设置浮动

黄色盒子左浮动后，脱离标准文档流，其后的绿色盒子和蓝色盒子”自动顶上去“。这里并不是绿色盒子消失了，而是黄色盒子把绿色盒子遮蔽了。
在这里插入图片描述

父盒子要有足够的宽度，否则子盒子会掉下去。（div元素习惯称为盒子）

父盒子的宽度为299px，3个子盒子的宽度分别为100px，子盒子全部设置左浮动，黄色盒子和绿色盒子有有足够空间，但是，对于蓝色盒子父盒子剩余空间只有99px，它自己的宽度为100px。蓝色子盒子“掉落”到下。
在这里插入图片描述

子盒子会顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素。

三个子盒子都设置了左浮动，父亲盒子宽度初始为300px，当把宽度修改为299px时，蓝色盒子会“掉落”，那么，掉落的位置是“位置1”还是“位置2”呢？

在这里插入图片描述
没错，父盒子初始有足够空间，蓝色盒子能够放在了绿色盒子后面，修改父盒子宽度后，父盒子没有足够空间容纳蓝色子盒子，于是蓝色盒子去找“前一个兄弟元素”，即黄色盒子，发现可以容纳蓝色盒子，于是放在“位置1”

在这里插入图片描述

现在，父盒子的宽度为299px，黄色盒子宽度为100px，那么，我修改蓝色盒子的宽度为200px呢？应该可以想到，父盒子的剩余空间的宽度199px，不足以容纳蓝色盒子，蓝色盒子会继续“掉落”，去找“前一个兄弟元素”，已经没有前一个盒子了，它成为新行上的第一个元素。

在这里插入图片描述

千万要注意，贴靠的元素是掉落后，遇到的前一个兄弟元素，而不是按照浮动元素的顺序的前一个兄弟元素。

浮动的先后顺序是黄、绿、蓝，但没有足够空间容纳蓝色盒子，蓝色盒子“掉落”，如果按浮动元素的顺序，选择贴靠前一个元素，那么应该是贴靠在黄色盒子后面，逻辑上蓝色盒子应该放在绿色盒子的正下方。但是实际上贴靠的是掉落后遇到的第一个兄弟元素。由于掉落后没有遇到任何元素，因此在新行上成为第一个元素。

在这里插入图片描述

另外，浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律可以设置宽度和高度，即使是span或者a标签。

在这里插入图片描述

4. 应用: 浮动实现网页布局

案例一：导航栏

我们要实现CSDN导航栏的左半部分，如下图所示

在这里插入图片描述

第一步，写出html代码。为了简洁，省略了设置编码、设置视窗、设置标题等非关键代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      
    </style>
</head>
<body>
    <div class="nav">
    	<div class="nav">
            <ul>
                <li><a href="#">博客</a></li>
                <li><a href="#">下载·课程</a></li>
                <li><a href="#">问答</a></li>
                <li><a href="#">学习</a></li>
                <li><a href="#">认证</a></li>
                <li><a href="#">MyGitHub</a></li>
                <li><a href="#">云服务</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

这是我们网页素颜的样子 -_-！

在这里插入图片描述

第二步，去除默认样式

* {
    /*去除所有元素的默认的样式*/
    margin: 0px;
    padding: 0px;
}

.nav ul {
    /*去除无序列表的项目符号-小圆点*/
    list-style: none;
}

.nav ul li a {  
     /* 去掉默认样式-下划线和文本颜色 */
    text-decoration: none;
    color: black;
}

没有比刚才好看多少 -_-！

在这里插入图片描述

第三步，给 div 和 li元素添加宽高和背景色样式

.nav {

    width: 700px;
    height: 50px;
    background-color: #ffbf00;
    /*使导航条居中显示*/
    margin: 20px auto;
}
.nav ul li {
    width: 100px;
    height: 50px;
    background-color: #02B052;
    /* 文本水平居中和竖直居中 */
    text-align: center;
    line-height: 50px;      
}

终于不是素面朝天了 : )

在这里插入图片描述

第四步，给li元素添加左浮动

这是本节课学习的重点，注意观察浮动前后的效果，着重体会文章开头的描述：浮动的本质功能是实现并排。也许，以后会介绍浮动可以实现的其他功能或效果，不过那些都不是浮动的“本职工作”。怎么说呢，就好比狗可以拿耗子，但那只能算兼职，它的本质工作还是看家护院 : )

.nav ul li {
    width: 100px;
    height: 50px;
    background-color: #02B052;
    /* 文本水平居中和竖直居中 */
    text-align: center;
    line-height: 50px;
    
    /*左浮动*/
    float: left;
}

如下图所示

在这里插入图片描述
可以去掉li元素的背景色了，它的作用是方便我们查看浮动作用的效果。

.nav ul li {
    width: 100px;
    height: 50px;

    /*删除临时的背景色*/
    /* background-color: #02B052; */
    
    /* 文本水平居中和竖直居中 */
    text-align: center;
    line-height: 50px;
    
    /*左浮动*/
    float: left;
}

在这里插入图片描述

到这里，已经完成了目标任务———浮动。还有可以优化的地方，不过就和本节的浮动无关了。不过，在生产环境中很实用，大家也可以继续了解下。

第五步，给a元素添加hover伪类

.nav ul li a:hover {
   /*鼠标悬浮后显示的背景色*/
   background-color: goldenrod;
}

请添加图片描述

存在两个问题：1、悬浮的颜色只覆盖了文字，应该覆盖整个li元素； 2、只有当鼠标在文字身上悬浮是才有效果，应该在li元素范围内悬浮都有效

第六步，设置a元素的显示方式和宽高

.nav ul li a {
   
   /*设置a元素的显示方式和宽高，使其充满父元素li*/
   display: inline-block;
   width: 100px;
   height: 50;

   /* 去掉默认样式-下划线和文本颜色 */
   text-decoration: none;
   color: black;
}

大功告成，最终效果展示：

👉查看运行效果和完整代码

请添加图片描述

三、定位

定位用于调整元素的位置，position属性设置定位方式，top、bottom、left、right属性设置元素的位置。不同的场景下，应用不同的定位方式。本部分内容会介绍，各种定位方式的使用方法及应用场景。

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

0、静态定位

依据标准流（规则）布局元素，此时 top, right, bottom, left 和 z-index 属性无效。它是默认值，即设置其他定位方式时，默认使用的定位方式。

1、CSS属性

定位方式

position: staitc 表示静态定位，默认定位方式

位置描述

top, right, bottom, left 和 z-index 属性无效

1、相对定位

相对定位：元素相对自己原来的位置进行调整

在这里插入图片描述

1、CSS属性

定位方式

position: relative 表示相对定位；

位置描述

left: 100px; 相对于自己左边的位置，或理解为向右移动的距离；
right: 100px 相对于自己右边的位置，或理解为向左移动的距离；
top: 100px 相对于自己上边的位置，或理解为向下移动的距离；
bottom: 100px 相对于自己下边的位置，或理解为向上移动的距离。

属性值单位px，可以为负数，表示向规定方向的反方向移动。

left，right表示水平方向的位置，只能设置一个。若同时设置，则后设置的生效。top，bottom同理。

如果盒子设置了相对定位，而没有设置位置描述，那么它的“影子”和“本体”重合。虽然显示效果和没有设置相对定位相同，但是此时却可以称为决定定位（下文会介绍）的参考物品。

例如left:-100px; 本来表示向右移动的距离，现在表示向左移动的距离。其效果等价于right: 100px，虽然效果相同，但是具体使用时还是要依据具体的场景，选择合适的设置位置的方式。

2. 相对定位的性质

相对定义的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已。渲染的图形可以认为是“影子”，“影子”并不会影响其他元素的布局，在标准流中依然占据空间的部分可以认为是“本体”。

给黄色盒子设置相对定位及位置后，可以看到绿色盒子并没有“顶上去”，因为元素的“本体”还在原来的位置，在新位置渲染的只是它的“影子”。

不会对页面上其他元素产生影响的意思是，不会排挤其他元素。

👉查看代码

在这里插入图片描述

3、应用

相对定位的主要应用有以下两个：

微调元素位置
绝对定位的参考

微调元素位置案例1-导航栏悬浮出现红色横条

如下图所示，当鼠标悬浮在导航栏某项栏目上时，会在栏目的上方出现一条红线。
上文介绍浮动的部分，当鼠标悬浮时，会改变背景色，它们都比较常用的效果。

在这里插入图片描述

👉查看初始代码（以在浮动部分实现的导航条代码为基础），可以在此代码基础上按照一下步骤添加代码。

第一步，给a元素添加hover伪类，当悬浮时在栏目顶部显示红条；

.nav ul li a:hover {
    /*鼠标悬浮后栏目顶部显示红线*/
    border-top: 5px solid #ed1c24;
}

红条虽然显示了，但是文字似乎被它挤了下来，这不是我们期待的结果。

在这里插入图片描述
为了更明显的看到a元素被挤压下来的效果，我们给a元素临时添加背景色。

.nav ul li a {
    /* 临时背景色*/
    background-color: #02B052;
}

对于a元素来说，添加了上边框，它整体的高度变了，但是它的父元素li的高度是固定的，于是a元素就向下溢出了。（为了效果明显，这里调整了边框10px）

在这里插入图片描述
第二步，设置相对定位，微调a元素渲染（或显示）的位置。

.nav ul li a:hover {
    position: relative;
    top: -5px;
}

top:-5px;向上移动了5px（正好是边框的宽度），注意元素在标准流中实际占用空间的情况是元素的本体，而渲染效果是元素的影子。元素本体在标准流中并没有发生位置的移动，只是渲染效果相对元素本体进行了微调！

在这里插入图片描述
第三步，删去a元素的临时背景色

.nav ul li a {
    /* 临时背景色*/
    /*  background-color: #02B052; */
}

👉查看最终代码及显示效果

在这里插入图片描述

2. 绝对定位

决定定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置

在这里插入图片描述

1、css属性

定位方式
position: absolute 表示绝对定位

位置描述词

left: 100px 表示到参照物左边的距离
right: 100px 表示到参照物右边的距离
top: 100px 表示到参照物上边的距离
bottom: 100px 表示到参照物下边的距离

值可以是具体数值，也可以是%

2、绝对定位的性质和使用技巧

绝对定位的元素脱离标准文档流，将释放自己原来的位置，对其他元素不会产生任何干扰（指不会“挤压”其他元素），会对他们进行压盖。

绝对定位的盒子的基准点（参考物）并不总是浏览器窗口，会以自己祖先元素中，距离自己最近的拥有定位属性的盒子为基准点。通常，这个盒子使用相对定位，常称为“子绝父相”

如下图所示，具有黑色边框的父盒子包含两个子盒子，一个具有黄色的背景色，另一个具有绿色的背景色。给父盒子添加相对定位，没有添加位置描述，因此父盒子渲染位置和本体相同。黄色子盒子添加绝对定位，以父盒子为基准点（子绝父相），脱离标准流，释放自己原先的位置。绿色子盒子还在标准流中，因此会“顶上去”。对其他元素不会产生任何干扰（指不会“挤压”其他元素），压盖了绿色子盒子的一部分。

👉查看最终代码及显示效果
在这里插入图片描述

使用技巧

绝对定位的盒子垂直居中

如下图所示，具有黑色边框的父盒子设置相对定位（子绝父相），黄色子盒子就会以它为参照物。子盒子设置绝对定位，位置描述top:50%，意思是距离参照物上部有参照物高度50%的距离，换句话说，子盒子到参照物上部的距离为参照物高度的一般，我在父盒子中间画了一条并不存在的灰线，方便我们子盒子与父盒子的位置关系。然后，子盒子设置margin-top: 负的子盒子高度的一半，子盒子被“向上拉”了自己高度的一半，最后子盒子的中线和父亲盒子的中线重合，子盒子垂直居中。

总结： 父盒子相对定位，子盒子绝对定位并设置top:50%; margin-top: 负的子盒子高度的一半 ，注意margin-top的值为负数！

绝对定位的水平居中，方法类似，作为练习，不在赘述。

👉查看最终代码及显示效果
在这里插入图片描述

3、z-index属性

z-index属性可以设置绝对定位元素的堆叠顺序。属性值是一个没有单位的正整数，如果元素发生重叠，z-index属性值大的会在属性值小的上面。

负数会怎样？

如下图所示，黄色子盒子和绿色子盒子都设置了绝对定位，默认情况，依据盒子在标准流中的顺序，标准流中靠后的盒子在决定定位后，会遮盖在标准流中靠前的盒子。这一规则是符合现实生活习惯的，后出现的在上面。然后，设置黄色盒子的z-index: 999; 设置绿色盒子的z-index:99。由于黄色盒子的z-index属性值大于绿色盒子，因此黄色盒子遮盖了绿色盒子。设置你可以随意设置黄色盒子和绿色盒子的属性值（要求是正整数），只有黄色盒子的z-index比绿色盒子大即可。然而，使用像111、1111、11111等类型，数字数位不同，但是每位的数字一样，可以更直观的看出盒子之间的层级关系，是一种不错的使用习惯。

👉查看最终代码及显示效果（可以尝试更改z-index属性为不同大小的值，观察实时显示效果）
在这里插入图片描述

4、应用

绝对定位的主要应用

制作“压盖”效果
结合CSS精灵
结合JS实现动画

压盖特效案例一：轮播图按钮

如下图所示，CSDN网站首页存在的轮播图（已屏蔽广告，一般轮播图是广告图片），这也是许多网站首页常有的配置。

本案例的重点是通过绝对定位实现轮播图切换图片的按钮。切换图片的动作是通过JavaScript实现的，以后有机会会出相关文章介绍。

在这里插入图片描述

先把我们使用的图片放进来

在这里插入图片描述
第一步，初始代码，搭建html5骨架

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class="carousel">
        <img src="https://img-blog.csdnimg.cn/3ce516dd3a754fc7b86c58664cc092f1.jpeg" alt="">
        <a class="leftbtn btn"href="#">&lt;</a>
        <a class="rightbtn btn" href="#">&gt;</a>
    </div>
</body>

</html>

显示效果如下图所示：

在这里插入图片描述

第二步，设置CSS

.carousel {
    /*图片所在盒子的宽高*/
    width: 800px;
    height: 375px;
    border: 1px solid #000;
    margin: 50px auto;

    /*子绝父相-用于做按钮的参考无*/
    position: relative;
}  

.carousel .btn {
    /*按钮的宽高，按钮a元素是行内元素，因为使用了绝对定位，所以可以设置宽高*/
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    /* 按钮的圆角 */
    border-radius: 50%;

    /*去除a元素下划线*/
    text-decoration: none;

    /*关键代码*/
    
    /*绝对定位并竖直居中*/
    position: absolute;
    top: 50%;
    margin-top: -25px;
}

.carousel .btn {
    /* 按钮中的字符居中 */
    text-align: center;
    line-height: 50px;
    

    font-size: 50px;
    color: white;
    background-color:rgba(86, 85, 85, 0.616);
    cursor: pointer;
    font-family: consolas;
}


.leftbtn {
	/* 关键代码 */
    /* 绝对定位，距离参照物左边的距离 */
    left: 10px;
}

.rightbtn {
	/* 关键代码 */
    /* 绝对定位，距离参照物右边的距离 */
    right: 10px;
}

显示效果如下图所示

在这里插入图片描述

压盖特效案例二：导航栏当前栏目红条

如下图所示，CSDN导航栏会在当前所在的栏目上方显示一条红线

在这里插入图片描述

本案例以在浮动部分实现的导航栏为基础。

👉查看初始代码

第一步，给第一个栏目“博客”添加红条

选中第一个li元素，添加伪元素::before。给伪元素设置绝对定位，宽度，边框。

注意需要给父盒子li添加相对定位，不然，伪元素的参照物就是浏览器窗口，红条的显示位置就会紧贴浏览器窗口，可以测试下，不设置相对定位的显示效果。


.nav ul li {
  /* 子绝父相*/
  position: relative;
}


.nav ul li:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  border-top: 3px solid #fc5531;
}

显示效果

在这里插入图片描述
👉查看最终代码

3、固定定位

固定定位，元素在浏览器窗口中位置固定，不会随着页面的滚动而发生移动。

如下图所示，黄色盒子使用固定定位，和绝对定位相似，元素也会脱离标准流。但是，它没有“子绝父相”的性质（绝对定位的元素能以使用相对定位的最近的祖先元素为参考物），只能以浏览器窗口为参考物。

当页面上下或左右滚动时，使用固定定位的黄色盒子，在浏览器左下角的位置并未发生改变，即不会随色页面的滚动而发生移动。

👉查看代码和演示效果

在这里插入图片描述

1、CSS属性

定位方式
postion: fixed 表示固定定位

位置描述

left: 100px 表示到参照物左边的距离
right: 100px 表示到参照物右边的距离
top: 100px 表示到参照物上边的距离
bottom: 100px 表示到参照物下边的距离

参考物只能时浏览器窗口

2、特性

脱离标准流，不会对其他元素的布局产生影响。对标准流中的元素会有压盖的效果。以浏览器窗口为参照物，不会随着页面的滚动而移动。

参考上文中的案例，不在举例说明

3、应用

固定定位的应用主要有：

返回顶部
楼层导航

返回顶部案例

如下图所示，在CSDN官网首页，拖动滚动条向下浏览内容，当到达一定程度时，会出现“返回顶部按钮”，点击按钮会回到内容的顶部。“返回顶部”在网页中是很常见的设计。

请添加图片描述

本案例以最开始介绍固定定位概念时使用的代码为基础，可以使用该👉初始代码，一步一步实现该功能。其实，初始代码已经实现了本部分的主要内容：固定定位。

以下内容主要为了实现点击按钮后返回顶部功能，使用了JavaScript的知识，不是本部分的重点，感兴趣的可以继续学习。

第一种实现，我们可以利用锚点的知识，使用特殊的锚点#top，代码如下

在html代码种，设置a元素的href属性为#top

    
      <a href="#top">返回 顶部</a>

如下图所示，虽然实现了返回顶部的功能，但是它的动画效果是“突变”的，即没有一个过程，直接来到了顶部。

请添加图片描述
第二种实现，使用JavaScript定时器功能

html代码，a元素的href属性调用js函数

<a href="javascript:returnToTop();">返回 顶部</a>

javascript代码

timeout为40ms，表示每40ms执行一次定时器中的代码，换句化说，每40ms"刷新"一次滚动条的位置。

通常条件下,人眼的识别连贯图像的速度是24帧/秒,也就是1000毫秒/24帧,大约为40ms(毫秒)。达到或者超过这个速度的连贯图像,观看时就不会形成卡顿的感觉。

当timeout超过40并且数值越大，卡顿效果越明显。

interval为75px，每次刷新，滚动条移动75px。如果你想要滚动条移动的快一点，就增大interval的值，反之，减小interval的值。

function returnToTop() {
    const timeout = 40;
    const interval = 75;
    const timer = setInterval(() => {
        if (document.documentElement.scrollTop == 0) {
            clearInterval(timer);
            return;
        }
        document.documentElement.scrollTop -= interval;
    }, timeout)
}

👉查看最终代码和演示效果，你可以尝试修改该timeout和interval的值，直观的感受下修改它们后的效果。

在这里插入图片描述

楼层导航案例

如下图所示，CSDN已结束的活动"「笔耕不辍」生命不止，写作不息 “，使用了楼层导航。

位于左侧的导航栏使用了固定定位

在这里插入图片描述
👉查看代码和演示效果

4、粘性定位

粘性定位（sticky positioning），与上述定位相比，是一种较新的定位方式。

它基本上是相对定位和固定定位的结合体。它允许使用该定位的元素的行为好像是在它滚动到特定临界点之前是相对定位的；之后是固定定位的。【本段翻译，参考自MDN官方文档：Sticky Positioning】

我个人的更易懂的解释：到达临界点前，元素使用相对定位。到达临界点后，”影子“则使用固定定位。

临界点，通常由top属性决定，表示元素顶部到浏览器窗口顶部的距离。另外，页面在垂直方向的内容通常也存在滚动条。**

例如，当包含class=positioned属性的元素，随着页面向上滚动，元素距离浏览器顶部的距离为0px时，”影子“使用固定定位，位置相对浏览器窗口上边30px。

.positioned {
  position: sticky;
  top: 0px;
}

查看完整代码
在这里插入图片描述

加粗样式

1、CSS属性

定位方式
postion: sticky 表示固定定位

位置描述
top: 100px 表示到参照物上边的距离
bottom: 100px 表示到参照物下边的距离

参考物只能时浏览器窗口

2、特性

不脱离标准文档流，到达临界点前，使用相对定位。到达临界点后，“影子使用固定定位

3、应用

粘性定位的主要应用有

导航
滚动索引

导航案例

如下图所示，导航条上方时是一张横幅图片，向下滚动，当到达临界点后，导航条固定。我设置的top值不为0，因此在导航条和窗口之间留了一条空隙。

查看或者修改完整代码
在这里插入图片描述
案例使用图片

在这里插入图片描述

滚动索引

查看渲染效果和完整代码

未完待续

有些内容需要进一步完善，虽然我学习的深入，遇到新的问题也会不断补充和总结

明月几时有666

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
1
评论
浮动与定位的使用(结合案例版)

详细介绍浮动和定位的特点和使用案例
复制链接

扫一扫

专栏目录

浮动与定位的使用(结合案例版)

目录

一、预备知识

1. 标准文档流

2. BFC

3、盒子模型

二、浮动

1. 本质功能

2. 左浮动和右浮动

3. 使用要点

4. 应用: 浮动实现网页布局

案例一： 导航栏

三、定位

0、静态定位

1、CSS属性

1、相对定位

1、CSS属性

2. 相对定位的性质

3、应用

微调元素位置案例1-导航栏悬浮出现红色横条

2. 绝对定位

1、css属性

2、绝对定位的性质和使用技巧

使用技巧

3、z-index属性

4、 应用

压盖特效案例一：轮播图按钮

压盖特效案例二：导航栏当前栏目红条

3、固定定位

1、CSS属性

2、特性

3、应用

返回顶部案例

楼层导航案例

4、粘性定位

1、CSS属性

2、特性

3、应用

导航案例

未完待续

案例一：导航栏

4、应用