css定位position 相对绝对 固定 粘滞定位

最新推荐文章于 2022-11-28 20:55:22 发布
最新推荐文章于 2022-11-28 20:55:22 发布
阅读量181 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47001401/article/details/107252804
版权

position
相对定位
当元素的position属性值设置为relation时则开启了元素的相对定位
相对定位的特点
1 元素开启相对定位后如果不设置偏移量 元素不会发生任何的变化
2 相对定位是参照于元素在文档流中的位置进行定位的（起始位置）
3 相对定位会提高元素的层级
4 相对不会使元素脱离文档流
在这里插入图片描述 绝对定位
在这里插入图片描述 固定定位 粘滞定位
在这里插入图片描述

m0_47001401
关注
弹性盒练习
qq_36939013的博客
04-22 261
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
CSS定位（相对、绝对、固定以及粘滞定位）
qq_45902025的博客
03-10 245
CSS定位（相对、绝对、固定以及粘滞定位）
粘滞定位
weixin_43339334的博客
06-03 1116
粘滞定位 - 当元素的position属性设置为sticky时则开启了元素的粘滞定位 - 粘滞定位和相对定位的特点基本一致， 不同的是粘滞定位可以在元素到达某个位置时将其固定
(定位)粘滞定位
m0_67176957的博客
04-04 188
新推出的一种定位，一些版本较老的浏览器是不支持的。 可以在W3school查看用法。 粘滞定位 当前元素的position属性设置为sticky时则开启了元 素的粘滞定位。 当粘滞定位和相对定位的特点基本上是一样的。 不同： 不同的是粘滞定位可以在元素到达某个位置时将其 固定。 例： position:sticky top:0;(值可以更换)可以将其固定在网页中不在移动 【自行尝试】 真正要做网页时，一般是不会用的 如果编写ie的话会发生不兼容的情况，酌情处理。 ...
css粘滞定位
Hero_rong的博客
08-02 339
兼容性不好，不推荐使用，但是这个属性蛮有意思的，哈哈哈哈哈 就是滚动条滚动到一定的位置，元素就不动了，比如下面就是，距离浏览器10px的时候就不动了，哈哈哈，真是太可爱了，粘滞定位是相对于父元素的哈 div { position: sticky; top: 10px } ...
CSS粘滞定位
weixin_52629592的博客
06-20 780
当我们将元素的position属性设置为sticky时,则开启了元素的粘滞定位用法: position: sticky;特点:粘滞定位与相对定位的特点基本一致与相对定位的不同点在于: 粘滞定位可以在元素到达某个位置时将其固定缺点: 粘滞定位的包容性并不高,不能兼容所有的浏览器下面我们来看一个栗子,实际体验一下使用粘滞定位: ​ 在上述代码中我们设置了5个块元素box1,2,3,4,5.且我们设置了box2为相对定位,其背景色为橙色;box3为绝对定位,其背景色为绿色;box4为固定
CSS — 相对定位、绝对定位、固定定位、粘滞定位
m0_59897687的博客
01-16 1096
目录 定位(position) 1.相对定位 2.绝对定位 3.固定定位 4.粘滞定位 5.绝对定位元素的布局 (1).水平布局 (2).垂直布局 6.元素的层级 定位(position) 定位是一种更加高级的布局手段，通过定位可以将元素摆到页面的任意位置，使用position属性来设置定位。 可选值： static 默认值，元素是静止的没有开启定位 relative 开启元素的相对定位 absolute...
CSS 定位布局 - 相对、绝对、固定、粘滞四种定位
method_Wcs的博客
08-16 2466
文档流 默认文档流，指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式，其中每一个块元素都独占一行，行内元素则在一行之内从左到右排列，直到在当前行遇到了边界后，换到下一行的起点起点继续排列。 脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来，其他盒子在定位的时候，会当做没看到它，两者位置重叠都是可以的，但是依然在DOM树中存在。 定位的实现 我们可以通过设置css中position属性的值来设定元素的定位类型。position的值分为以下几种： stati
CSS布局相关知识（四）：定位（相对、绝对、固定、粘滞）、层级
mateseq的博客
10-17 501
四种定位和层级相关知识
相对定位、绝对定位、固定定位、粘滞定位
m0_48036518的博客
11-28 645
相对定位、固定定位、绝对定位。粘滞定位
前端笔记——粘滞定位
weixin_44158539的博客
08-05 385
<!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 144
position sticky 粘滞定位和相对定位的特点基本一致， 不同的粘滞定位可以在固定在某个固定位置
前端学习笔记55-粘滞定位
weixin_45034895的博客
05-04 260
前端学习笔记55-粘滞定位 最后一个定位了，粘滞定位。 首先它是新推出的， 一些老浏览器不支持。查看zeal，发现IE不支持。 然后，什么是粘滞定位？ 打开京东官网 网页右边有这个东西，滑动滚动条，当这个东西还没有到顶部时，它是不动的，但是如果到顶部了，它就不动了。这就是粘滞定位。 把导航条练习的代码复制过来演示一下。 给body设置高度，然后设置粘滞定位，top为0。 body{ height: 3000px; } .nav{
~63粘滞定位
sanda_nd的博客
01-30 303
一、粘滞定位 将元素的position属性设置为sticky则开启了元素的粘滞定位 粘滞定位与相对定位的特点基本相同，不同的是粘滞定位到达某个位置时会固定 粘滞定位参照于它的包含块进行定位（并不常用，兼容性不好） 二、实例 ...
P47-前端基础CSS-Position粘滞定位介绍
Bruce小鬼
01-21 894
P46-前端基础CSS-Position粘滞定位介绍 1.概述 粘滞定位可以设置某个元素随着滚动条滚动到指定位置后固定不变。 粘滞定位 当元素的position属性设置为sticky时则开启了元素的粘滞定位 粘滞定位和相对定位的特点基本一致， 不同的是粘滞定位可以在元素到达某个位置时将其固定 2.粘滞定位案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>粘
css之粘性定位
qq_29055201的博客
04-14 5128
粘性定位sticky position: sticky是CSS3新增的一处属性，可以说是相对定位relative与固定定位fixed的结合，它主要用在对scroll事件的监听上，简单来说，在滚动过程中，某个元素距离父元素的距离达到sticky粘性定位的要求时(比如：top: 40px;)position: sticky这时的效果相当于fixed定位，固定到适当的位置（比如：固定在距离屏幕上方40p...
绝对定位 粘滞定位 先定位后内容后大小后裁剪
vhkuhdf的博客
08-17 109
position：absolute top bottom left right 开启后，脱离文档流 改变元素性质。行内变块，块的宽高根据内容撑开 提升元素层级 相对于包含块（外边div）（如果上一层div开启定位 不脱离文档 定位将以上一层div）进行定位 绝对定位的包含块： 离它最近的开启了定位的祖先元素 如果所有的祖先元素没有开启定位，定位将以初始点为起始点 ...
定位详解（固定定位，粘滞定位）
BambooStrip的博客
08-15 3688
css定位详解篇二
position:sticky粘性定位
heyuqing32的博客
01-08 570
&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 <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、付费专栏及课程。

余额充值