绝对定位 粘滞定位 先定位后内容后大小后裁剪

最新推荐文章于 2022-11-03 12:10:03 发布
最新推荐文章于 2022-11-03 12:10:03 发布
阅读量111 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vhkuhdf/article/details/108050504
版权

position：absolute

top bottom left right

开启后，脱离文档流

改变元素性质。行内变块，块的宽高根据内容撑开

提升元素层级

相对于包含块（外边div）（如果上一层div开启定位 不脱离文档  定位将以上一层div）进行定位

 

绝对定位的包含块：

离它最近的开启了定位的祖先元素

如果所有的祖先元素没有开启定位，定位将以初始点为起始点

 

粘滞定位：

position：sticky

top：

 

开启定位，可以z-index属性来指定元素层级

z-index：1 2 3 参数      参数越大  层级越高   优先显示

如果层级一样，优先显示靠下的

祖先元素层级再高也不会盖住后代元素

Tokgo180313
关注
弹性盒练习
qq_36939013的博客
04-22 264
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
.11.定位的简介
m0_59708269的博客
03-17 359
笔记来源：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 文章目录 定位的简介1. 相对定位偏移量（offset）相对定位的特点 2. 绝对定位绝对定位的特点包含块（containing block）水平方向的布局水平居中垂直方向的布局垂直居中水平垂直居中小结 3. 固定定位固定...
粘滞定位
weixin_43339334的博客
06-03 1122
粘滞定位 - 当元素的position属性设置为sticky时则开启了元素的粘滞定位 - 粘滞定位和相对定位的特点基本一致， 不同的是粘滞定位可以在元素到达某个位置时将其固定
(定位)粘滞定位
m0_67176957的博客
04-04 192
新推出的一种定位，一些版本较老的浏览器是不支持的。 可以在W3school查看用法。 粘滞定位 当前元素的position属性设置为sticky时则开启了元 素的粘滞定位。 当粘滞定位和相对定位的特点基本上是一样的。 不同： 不同的是粘滞定位可以在元素到达某个位置时将其 固定。 例： position:sticky top:0;(值可以更换)可以将其固定在网页中不在移动 【自行尝试】 真正要做网页时，一般是不会用的 如果编写ie的话会发生不兼容的情况，酌情处理。 ...
css粘滞定位
Hero_rong的博客
08-02 341
兼容性不好，不推荐使用，但是这个属性蛮有意思的，哈哈哈哈哈 就是滚动条滚动到一定的位置，元素就不动了，比如下面就是，距离浏览器10px的时候就不动了，哈哈哈，真是太可爱了，粘滞定位是相对于父元素的哈 div { position: sticky; top: 10px } ...
CSS粘滞定位
weixin_52629592的博客
06-20 794
当我们将元素的position属性设置为sticky时,则开启了元素的粘滞定位用法: position: sticky;特点:粘滞定位与相对定位的特点基本一致与相对定位的不同点在于: 粘滞定位可以在元素到达某个位置时将其固定缺点: 粘滞定位的包容性并不高,不能兼容所有的浏览器下面我们来看一个栗子,实际体验一下使用粘滞定位: ​ 在上述代码中我们设置了5个块元素box1,2,3,4,5.且我们设置了box2为相对定位,其背景色为橙色;box3为绝对定位,其背景色为绿色;box4为固定
html5+css3学习（下）
m0_51636525的博客
11-24 831
《css权威指南》 2021.11.24 由于笔记的内容太多了不好查找，于是就换一篇。 9.内边距、边框、轮廓、外边距 9.1基本元素框 文档的每个元素都会生成一个矩形框，我们称之为元素框。这个框体描述元素在文档布局中所占的空间。 默认情况下，渲染出来的文档中，各矩形框的排布方式在视觉上不会出现重叠，尽量留有足够的间隔，能清楚地分清一部分内容属于哪个元素。 9.1.1.width height宽度和高度 默认情况下，元素的宽度指从左内边界到右内边界的距离，元素的高度指从上内边界到下内边界的距
css基础
m0_72711350的博客
11-03 479
css
web网页技术学习第一阶段知识总结
weixin_44949447的博客
07-26 1916
学习了一些html的标签、属性和元素的分类，各种重要标签和CSS的各种用法和样式
CSS基础知识
ailsa_csdn的博客
03-23 602
css选择器、盒模型、浮动、定位等基础知识
前端笔记——粘滞定位
weixin_44158539的博客
08-05 389
<!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 146
position sticky 粘滞定位和相对定位的特点基本一致， 不同的粘滞定位可以在固定在某个固定位置
前端学习笔记55-粘滞定位
weixin_45034895的博客
05-04 267
前端学习笔记55-粘滞定位 最后一个定位了，粘滞定位。 首先它是新推出的， 一些老浏览器不支持。查看zeal，发现IE不支持。 然后，什么是粘滞定位？ 打开京东官网 网页右边有这个东西，滑动滚动条，当这个东西还没有到顶部时，它是不动的，但是如果到顶部了，它就不动了。这就是粘滞定位。 把导航条练习的代码复制过来演示一下。 给body设置高度，然后设置粘滞定位，top为0。 body{ height: 3000px; } .nav{
~63粘滞定位
sanda_nd的博客
01-30 307
一、粘滞定位 将元素的position属性设置为sticky则开启了元素的粘滞定位 粘滞定位与相对定位的特点基本相同，不同的是粘滞定位到达某个位置时会固定 粘滞定位参照于它的包含块进行定位（并不常用，兼容性不好） 二、实例 ...
P47-前端基础CSS-Position粘滞定位介绍
Bruce小鬼
01-21 897
P46-前端基础CSS-Position粘滞定位介绍 1.概述 粘滞定位可以设置某个元素随着滚动条滚动到指定位置后固定不变。 粘滞定位 当元素的position属性设置为sticky时则开启了元素的粘滞定位 粘滞定位和相对定位的特点基本一致， 不同的是粘滞定位可以在元素到达某个位置时将其固定 2.粘滞定位案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>粘
css定位position 相对绝对 固定 粘滞定位
m0_47001401的博客
07-10 185
position 相对定位 当元素的position属性值设置为relation时则开启了元素的相对定位 相对定位的特点 1 元素开启相对定位后如果不设置偏移量 元素不会发生任何的变化 2 相对定位是参照于元素在文档流中的位置进行定位的（起始位置） 3 相对定位会提高元素的层级 4 相对不会使元素脱离文档流 绝对定位 固定定位粘滞定位 ...
css之粘性定位
qq_29055201的博客
04-14 5131
粘性定位sticky position: sticky是CSS3新增的一处属性，可以说是相对定位relative与固定定位fixed的结合，它主要用在对scroll事件的监听上，简单来说，在滚动过程中，某个元素距离父元素的距离达到sticky粘性定位的要求时(比如：top: 40px;)position: sticky这时的效果相当于fixed定位，固定到适当的位置（比如：固定在距离屏幕上方40p...
定位详解（固定定位，粘滞定位）
BambooStrip的博客
08-15 3704
css定位详解篇二
position:sticky粘性定位
heyuqing32的博客
01-08 577
&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、付费专栏及课程。

余额充值