~63粘滞定位

最新推荐文章于 2023-03-10 18:52:23 发布
最新推荐文章于 2023-03-10 18:52:23 发布
阅读量316 收藏
点赞数
分类专栏： html和css 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanda_nd/article/details/122751296
版权

一、粘滞定位

将元素的position属性设置为sticky则开启了元素的粘滞定位

粘滞定位与相对定位的特点基本相同，不同的是粘滞定位到达某个位置时会固定

粘滞定位参照于它的包含块进行定位（并不常用，兼容性不好）

二、实例

sanda_nd
关注
专栏目录
弹性盒练习
qq_36939013的博客
04-22 278
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
定位的开启及特点（固定定位和粘滞定位）
m0_72959685的博客
08-13 1087
第三点和第四点说的是，设置元素粘滞定位后，粘滞定位会页面某个位置设一个点，如果在页面下拉但还没有下拉到那个点的时候，元素会跟着页面的下拉而移动，等页面下拉到设置的点的时候，元素自动开启粘滞定位，不会随着页面的滚动而滚动，固定起来。如图所示，页面明显已经下拉了很多了，但功能栏依然固定在页面右边中部偏下的位置，这是因为使用了固定定位的原因，功能栏一直固定在页面的右边的中部偏下的位置。如图所示：页面滚动时侧边栏随着页面滚动而滚动，但侧边栏滚动到了顶部后不再滚动，而是固定下来，这是因为侧边栏设置了粘滞定位的原因。.
粘滞定位
weixin_43339334的博客
06-03 1133
粘滞定位 - 当元素的position属性设置为sticky时则开启了元素的粘滞定位 - 粘滞定位和相对定位的特点基本一致， 不同的是粘滞定位可以在元素到达某个位置时将其固定
(定位)粘滞定位
m0_67176957的博客
04-04 201
新推出的一种定位，一些版本较老的浏览器是不支持的。 可以在W3school查看用法。 粘滞定位 当前元素的position属性设置为sticky时则开启了元 素的粘滞定位。 当粘滞定位和相对定位的特点基本上是一样的。 不同： 不同的是粘滞定位可以在元素到达某个位置时将其 固定。 例： position:sticky top:0;(值可以更换)可以将其固定在网页中不在移动 【自行尝试】 真正要做网页时，一般是不会用的 如果编写ie的话会发生不兼容的情况，酌情处理。 ...
css粘滞定位
Hero_rong的博客
08-02 355
兼容性不好，不推荐使用，但是这个属性蛮有意思的，哈哈哈哈哈 就是滚动条滚动到一定的位置，元素就不动了，比如下面就是，距离浏览器10px的时候就不动了，哈哈哈，真是太可爱了，粘滞定位是相对于父元素的哈 div { position: sticky; top: 10px } ...
CSS粘滞定位
weixin_52629592的博客
06-20 808
当我们将元素的position属性设置为sticky时,则开启了元素的粘滞定位用法: position: sticky;特点:粘滞定位与相对定位的特点基本一致与相对定位的不同点在于: 粘滞定位可以在元素到达某个位置时将其固定缺点: 粘滞定位的包容性并不高,不能兼容所有的浏览器下面我们来看一个栗子,实际体验一下使用粘滞定位: ​ 在上述代码中我们设置了5个块元素box1,2,3,4,5.且我们设置了box2为相对定位,其背景色为橙色;box3为绝对定位,其背景色为绿色;box4为固定
CSS定位（相对、绝对、固定以及粘滞定位）
qq_45902025的博客
03-10 264
CSS定位（相对、绝对、固定以及粘滞定位）
CSS — 相对定位、绝对定位、固定定位、粘滞定位
m0_59897687的博客
01-16 1121
目录 定位(position) 1.相对定位 2.绝对定位 3.固定定位 4.粘滞定位 5.绝对定位元素的布局 (1).水平布局 (2).垂直布局 6.元素的层级 定位(position) 定位是一种更加高级的布局手段，通过定位可以将元素摆到页面的任意位置，使用position属性来设置定位。 可选值： static 默认值，元素是静止的没有开启定位 relative 开启元素的相对定位 absolute...
CSS基础(18)_相对定位、绝对定位、固定定位、粘滞定位
no15870678621的博客
04-08 932
CSS各种定位介绍
相对定位、绝对定位、固定定位、粘滞定位
m0_48036518的博客
11-28 667
相对定位、固定定位、绝对定位。粘滞定位
前端笔记——粘滞定位
weixin_44158539的博客
08-05 401
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航条</title> <link rel="stylesheet" href="./reset.css"&
粘滞定位sticky
wxwmb11的博客
03-29 155
position sticky 粘滞定位和相对定位的特点基本一致， 不同的粘滞定位可以在固定在某个固定位置
前端学习笔记55-粘滞定位
weixin_45034895的博客
05-04 276
前端学习笔记55-粘滞定位 最后一个定位了，粘滞定位。 首先它是新推出的， 一些老浏览器不支持。查看zeal，发现IE不支持。 然后，什么是粘滞定位？ 打开京东官网 网页右边有这个东西，滑动滚动条，当这个东西还没有到顶部时，它是不动的，但是如果到顶部了，它就不动了。这就是粘滞定位。 把导航条练习的代码复制过来演示一下。 给body设置高度，然后设置粘滞定位，top为0。 body{ height: 3000px; } .nav{
P47-前端基础CSS-Position粘滞定位介绍
Bruce小鬼
01-21 904
P46-前端基础CSS-Position粘滞定位介绍 1.概述 粘滞定位可以设置某个元素随着滚动条滚动到指定位置后固定不变。 粘滞定位 当元素的position属性设置为sticky时则开启了元素的粘滞定位 粘滞定位和相对定位的特点基本一致， 不同的是粘滞定位可以在元素到达某个位置时将其固定 2.粘滞定位案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>粘
css定位position 相对绝对 固定 粘滞定位
m0_47001401的博客
07-10 198
position 相对定位 当元素的position属性值设置为relation时则开启了元素的相对定位 相对定位的特点 1 元素开启相对定位后如果不设置偏移量 元素不会发生任何的变化 2 相对定位是参照于元素在文档流中的位置进行定位的（起始位置） 3 相对定位会提高元素的层级 4 相对不会使元素脱离文档流 绝对定位 固定定位粘滞定位 ...
css之粘性定位
qq_29055201的博客
04-14 5145
粘性定位sticky position: sticky是CSS3新增的一处属性，可以说是相对定位relative与固定定位fixed的结合，它主要用在对scroll事件的监听上，简单来说，在滚动过程中，某个元素距离父元素的距离达到sticky粘性定位的要求时(比如：top: 40px;)position: sticky这时的效果相当于fixed定位，固定到适当的位置（比如：固定在距离屏幕上方40p...
定位详解（固定定位，粘滞定位）
BambooStrip的博客
08-15 3737
css定位详解篇二
绝对定位 粘滞定位 先定位后内容后大小后裁剪
vhkuhdf的博客
08-17 118
position：absolute top bottom left right 开启后，脱离文档流 改变元素性质。行内变块，块的宽高根据内容撑开 提升元素层级 相对于包含块（外边div）（如果上一层div开启定位 不脱离文档 定位将以上一层div）进行定位 绝对定位的包含块： 离它最近的开启了定位的祖先元素 如果所有的祖先元素没有开启定位，定位将以初始点为起始点 ...
position:sticky粘性定位
heyuqing32的博客
01-08 600
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;  &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt;  &lt;style&gt; div.sticky {   position: -webkit-sticky;   position:
html table 表头粘滞定位
最新发布
06-12
在 HTML 的 table 中，可以通过 CSS 实现表头的粘滞定位。具体实现步骤如下： 1. 将表头部分放在一个单独的 \<thead> 元素中，将表格内容放在 \<tbody> 元素中。 ```html 表头1 表头2 表头3 内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值