CSS基础(18)_相对定位、绝对定位、固定定位、粘滞定位

最新推荐文章于 2023-05-02 21:00:00 发布
最新推荐文章于 2023-05-02 21:00:00 发布
阅读量888 收藏 1
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/no15870678621/article/details/124049851
版权

定位(position)

定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置。使用position属性来设置定位。

可选值：
static        默认值，元素是静止的没有开启定位
relative     开启元素的相对定位
absolute   开启元素的绝对定位
fixed         开启元素的固定定位
sticky        开启元素的粘滞定位

偏移量(offset)：
当元素开启了定位以后，可以通过偏移量来设置元素的位置。

top：定位元素和定位位置上边的距离(top值越大，定位元素越向下移动)
bottom：定位元素和定位位置下边的距离(bottom值越大，定位元素越向上移动)
left：定位元素和定位位置左边的距离(left值越大，定位元素越靠右)
right：定位元素和定位位置右边的距离(right值越大，定位元素越靠左)

定位元素垂直方向的位置由top和bottom两个属性来控制，水平方向的位置由left和right两个属性来控制，通常情况下垂直方向上我们只会使用其中一个值，水平方向也只使用一个值。

<body>
    <div class="box1">1</div>
    <em>定位介绍</em>
    <div class="box2">2
        <div class="box3">3
            <div class="box4">4</div>
最低0.47元/天 解锁文章
风之舞_yjf
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS粘性定位
m0_46744635的博客
08-21 805
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS粘性定位</title> <style> .bod...
定位全解(绝对，相对，固定，粘性定位)
DangR_Jisoo的博客
11-24 1513
定位全解(绝对，相对，固定，粘性定位) 一. 绝对定位(position: absolute) 绝对定位是元素在移动的时候，相对于其父亲来说的(拼爹型)，若无父元素，按其祖先元素，如其父元素或祖先元素无定位，则以浏览器为主 元素设置绝对定位后，不再占有原来的位置，其他的元素会涌上来，而且设置绝对定位会压住下面的标准流 <style> * { margin: 0; padding: 0; }
CSS粘滞定位
weixin_52629592的博客
06-20 735
当我们将元素的position属性设置为sticky时,则开启了元素的粘滞定位用法: position: sticky;特点:粘滞定位与相对定位的特点基本一致与相对定位的不同点在于: 粘滞定位可以在元素到达某个位置时将其固定缺点: 粘滞定位的包容性并不高,不能兼容所有的浏览器下面我们来看一个栗子,实际体验一下使用粘滞定位: ​ 在上述代码中我们设置了5个块元素box1,2,3,4,5.且我们设置了box2为相对定位,其背景色为橙色;box3为绝对定位,其背景色为绿色;box4为固定
css粘滞定位
Hero_rong的博客
08-02 303
兼容性不好，不推荐使用，但是这个属性蛮有意思的，哈哈哈哈哈 就是滚动条滚动到一定的位置，元素就不动了，比如下面就是，距离浏览器10px的时候就不动了，哈哈哈，真是太可爱了，粘滞定位是相对于父元素的哈 div { position: sticky; top: 10px } ...
CSS之粘滞定位
qq_34550459的博客
04-17 1490
粘滞定位:当元素的position属性设置为sticky,则开启了粘滞定位 和相对定位的特点基本一致 不同的是粘滞定位可以在元素到达某个位置时将其固定,不随滚动条滚动而滚动 相对于body元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta...
Valve-stiction-model.rar_simulink和论文_数据驱动 matlab_粘滞_阀门_阀门粘滞
07-14
过程工业中带有粘滞的阀门数据驱动模型，模型采用SCI论文《Two-layer banary tree data-driven model for valve stiction》中提出的算法，本人自己独立编制转化，成功运行，性能良好。模型由Matlab文件和Simulink...
利用GPS速度场估算青藏高原地壳韧性层等效粘滞系数分布的研究.pdf
09-09
《利用GPS速度场估算青藏高原地壳韧性层等效粘滞系数分布的研究》这篇文章主要探讨了如何通过全球定位系统（GPS）的速度场数据来研究青藏高原地壳的韧性层，尤其是其等效粘滞系数的分布情况。在地球物理学领域，地壳...
基于GPS观测值研究日本M_W9.0地震震后形变机制.pdf
09-07
利用这些数据估计地震区域的地幔粘滞系数在1.5×10^19 Pa·S数量级。 【关键词】GPS观测、日本Mw9.0地震、震后形变、震后余滑、粘滞性 【主要内容】日本M9.0地震是历史上最大的一次地震之一，发生在太平洋板块俯冲...
GPS约束下川滇地区下地壳拖曳作用及断裂活动性有限元模拟.pdf
09-07
【GPS定位系统】是全球定位系统的简称，是一种利用卫星导航技术确定地球上任何位置精确坐标的技术。在本研究中，GPS数据被用来约束川滇地区的地壳运动分析，提供了地面运动速度的数据基础。 【系统开发】涉及到利用...
机器视觉对位引导教程
08-10
机器视觉对位引导技术教程，可利用cognex，halcon，opencv等算法库实现
CSS之定位（粘滞定位）
不动声色的小蜗牛的博客
07-16 1705
粘滞定位： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>粘滞定位</title> <style> body{ height: 3000px; } /* 粘滞定位 -当元素的position属性值设置为sticky时开启元素的粘滞定位 -粘滞定位和相对定位的特点基本一致，不同的是粘
CSS静态定位，相对定位，绝对定位，固定定位，粘性定位233
luojunjie1999的博客
07-18 216
CSS定位 定位模式： 边偏移： 静态定位（了解）： 相对定位（重要）： .box1{ position: relative; top: 50px; bottom: 50px; left: 50px; right: 50px; width: 100px; height: 100px; back
CSS 定位（静态、固定、相对、绝对、粘性）
Ares5k
04-08 750
静态定位、固定定位、相对定位、绝对定位、粘性定位
css粘性定位
友人C君的博客
01-24 1675
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>粘性定位</title> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; p...
CSS：深入理解粘性定位 position: sticky
热门推荐
weixin_43932309的博客
05-02 1万+
粘性定位尝鲜，祖先元素的overflow和height对结果的影响。
css粘性定位以及定位总结
lxllxl211的博客
10-04 549
3、必须+top、bottom、right、left其中的一个才有效。1、以浏览器的可视窗口为参照点移动元素（固定定位特点）就是可以随便移动滚动条，而且方块保持在固定位置。粘性定位可以被认为是相对定位和固定定位的混合。2、粘性定位占有原先的位置（相对定位特点）
CSS定位（相对、绝对、固定以及粘滞定位）
qq_45902025的博客
03-10 214
CSS定位（相对、绝对、固定以及粘滞定位）
CSS的相对定位与绝对定位
singerAngel
10-11 1599
在CSS中，所谓绝对定位指的是“相对于”已经定位的祖先元素，如果不存在已经定位的祖先元素，那么就“相对于”最初的包含快(一般情况下为body);相对定位指的是相对于元素初始位置进行定位。       下面来讲述两者的区别：           (1)相对定位       相对定位比较简单，如果在某个元素中设置了position属性为relative,那么该元素会相对于初始位置进行定位，详情如
html table 表头粘滞定位
最新发布
06-12
在 HTML 的 table 中，可以通过 CSS 实现表头的粘滞定位。具体实现步骤如下： 1. 将表头部分放在一个单独的 \<thead> 元素中，将表格内容放在 \<tbody> 元素中。 ```html <table> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>内容4</td> <td>内容5</td> <td>内容6</td> </tr> <!-- 其他行 --> </tbody> </table> ``` 2. 使用 CSS 给表头元素设置固定位置和 z-index 属性，使其显示在表格上方。 ```css thead { position: fixed; top: 0; z-index: 1; } ``` 3. 设置表格内容区域的 padding-top 属性，以便在表头固定位置时避免内容被遮挡。 ```css tbody { padding-top: 40px; /* 40px 为表头高度 */ } ``` 这样，当用户滚动页面时，表头会一直固定在页面顶部，并且表格内容会在表头下方显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值