首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

绝对定位的div不会滚动;当其他内容滚动时,它会固定在屏幕上

绝对定位的div不会随其他内容的滚动而滚动,它会固定在屏幕上的特定位置。

绝对定位是CSS中的一种定位方式,通过设置元素的position属性为absolute,可以将元素相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素,则相对于最初的包含块进行定位(通常是浏览器窗口)。

相比于其他定位方式(如相对定位、固定定位),绝对定位的元素脱离了文档流,不会影响其他元素的布局。因此,当其他内容滚动时,绝对定位的div会保持在屏幕上的固定位置,不会随滚动而移动。

绝对定位的div适用于需要固定在屏幕上某个位置的元素,如导航栏、悬浮广告等。通过设置top、bottom、left、right等属性,可以精确地控制元素的位置。

腾讯云提供了云计算相关的产品和服务,其中与前端开发和布局相关的产品包括云服务器(CVM)、云存储(COS)等。您可以通过以下链接了解更多信息:

  • 腾讯云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云存储(COS):https://cloud.tencent.com/product/cos

请注意,以上链接仅为示例,实际使用时应根据具体需求选择适合的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

css中绝对定位_绝对定位和相对定位怎么用

滚动滚动,距离页面左上角位置不变。 2.使用bottom属性描述,是以首屏页面左下角为参考点来调整位置。...父辈元素设置了相对定位,则子元素绝对定位以父辈元素为参考点。 父相子绝,父绝子绝,父子绝,都是以父辈元素为参考点。父绝子绝,因为绝对定位脱离标准流,影响页面的布局。父相子绝是常用布局方案。... 一层没有再往上找: 绝对定位水平居中 设置绝对定位之后...:固定当前元素不会随着页面滚动滚动, 特性:1.脱标 2.提升层级 3.固定不变 不会随页面滚动滚动 参考点:设置固定定位,用top描述。...> 之前: 之后脱标: 定在屏幕: 参考点 用top描述,以浏览器左上角为参考点 用bottom描述,以浏览器左下角为参考点,无论滚动条动还是浏览器底部上下移动

2.5K30

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

一、固定定位概念语法 ---- 固定定位 是 固定在屏幕某个位置 , 即使拖动滚动条 , 固定定位元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局中位置 , 漂浮在任何元素上方...; 固定定位 只相对于 浏览器可视窗口 进行定位 , 定位方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位 与 父元素没有任何关系 ; 固定定位滚动滚动没有任何关系 ;...固定定位元素 始终显示在浏览器可视窗口定位置 , 不会改变 ; 注意相对是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 本质是一种 特殊绝对定位 ;...就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 二、固定定位代码示例 ---- 在上一篇博客【CSS】定位...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码基础 , 将中心标准流元素设置为 固定定位 元素 ; 为 body 设置高度 1000px , 方便进行滚动滚动 ;

1.7K20

小智在这3年开发中遇到 CSS 问题及解决方案,有大佬帮他总结好了 !

在 macOS Chrome上会很好看。然而,在 Windows滚动条总是在那里(即使内容很短)。...这是因为无论内容如何,scroll-y都会显示滚动条,这时候我们可以使用overflow: auto,它只会在需要显示滚动条。 ?...在移动设备,浏览器会显示一个水平滚动条。 ? 解决方法就是使用 flex-wrap: wrap,这样水平空间不够,浏览器会帮我们自动换行。...长单词和链接 当在移动屏幕阅读一篇文章,一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况发生 ?...视口不够高将元素固定在屏幕顶部 如果将元素固定在屏幕顶部,如果视口不够高会发生什么情况?很简单:它会占用屏幕空间,因此,用户浏览网站可用垂直区域就会变小,这会影响用户体验。

3.7K10

聊聊苹果营销页中几个有趣交互动画

缩放图片 开始是一张全屏图片,在滚动过程中慢慢变成另一张图片,接着这张图片以屏幕正中间为基准点慢慢缩小,在缩小过程中,这张图是定在屏幕中央,缩小到一定值时候,图片随着滚动滚动。 ?...(window.innerHeight / 2 - $('#imgWrapper').height() / 2); 翻盖或者合盖时候,我们需要将电脑固定在视口中,等到完全翻开或者合上时候,再让起随滚动滚动...它由两张图片组成,屏幕中显示图片,他与 电脑外壳 间距是 18px,放大了之后,图片与电脑外壳图片 上边距应该是 18 * 放大比率。 电脑外壳图片,如下: ?...其他内容 ❝篇幅有限,笔者只列举了滚动事件代码和 html 结构,其他代码,比如 drawImage 这个方法,大家有兴趣的话,可以参考源码。❞ 预览效果图 ?...styles.fixed : ''}`}>IMG2 // ... 其他内容 预览效果图 ?

1.9K60

Position定位

脱离文档流,也就是将元素从普通布局排版中拿走,其他盒子在定位时候,会当做脱离文档流元素不存在而进行定位。...bottom、left、right、z-index属性设置有效,设置偏移属性后会移动相对定位元素,但它原本所占空间不会改变,相对定位元素经常被用来作为绝对定位元素容器块。...,元素位置相对于浏览器窗口是固定位置,即使是窗口滚动元素也不会移动,注意在中元素使用fixed是相对于进行定位,类似于在页面中创建了一个新浏览器窗口...,粘性定位元素是依赖于用户滚动,在position: relative与position: fixed定位之间切换,在页面显示sticky表现类似于position: relative,而页面滚动超出目标区域...sticky表现类似于position: fixed,它会定在目标位置,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位,这个特定阈值指的是top、right、bottom、left其中之一

98620

2021前端面试高频 HTML + CSS

搜索引擎无法解析 iframe ,不便于SEO优化 浏览器后退功能失效 ❞ 16. img 标签 title 和 alt 有什么区别 ❝title : 当鼠标滑到元素显示 alt : 图片无法加载显示文字内容...❞ absolute 绝对定位 ❝元素会「脱离文档流」,不会预留原有位置空间。 如果就近都没有指定 position , 那么它会 以全局 为定位定位了。...绝对定位元素可以设置外边距(margins),且不会其他边距合并。 「最佳实践」 :也是我常用 技巧布局方式 子绝父相 它基本可以满足你复杂日常布局需求。...❞ fixed 固定定位 ❝元素会「脱离文档流」,不会预留原有位置空间。 元素包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕仍固定在相同位置元素。...元素位置在屏幕滚动不会改变。 ❞ sticky 粘性定位 ❝元素根据正常文档流进行定位,然后相对它最近滚动祖先 和 最近块级祖先 。

91340

前端成神之路-定位

定位 将盒子定在某一个位置 自由漂浮在其他盒子上面 —— CSS 离不开定位,特别是后面的 js 特效。 2....当我们滚动窗口时候,盒子是固定屏幕某个位置 ?...观察下图,思考一下在布局,左右两个方向箭头图片以及父级盒子定位方式。 ? 分析: 方向箭头叠加在其他图片上方,应该使用绝对定位,因为绝对定位完全脱标,完全不占位置。...新浪案例分析 顶部图片固定在浏览器可视窗口顶部,不会随窗口一起滚动; 左右两侧广告图片固定在浏览器可视窗口左右两侧,不会随窗口一起滚动; 注意:底部内容图片初始显示在顶部图片下方,如何解决?...案例小结: 固定定位应用场景:固定在浏览器可视窗口某个位置布局; 在使用固定和绝对定位,如果盒子中没有内容,需要指定宽度(稍后就讲)。

1.9K20

CSS基础知识

内联元素特点: 1、和其他元素都在一行; 2、元素高度、宽度、行高及顶部和底部边距不可设置; 3、元素宽度就是它包含文字或图片宽度,不可改变。 四....top、bottom属性相对于其最接近一个具有定位属性父包含块进行绝对定位。...如果不存在这样包含块,则相对于body元素,即相对于浏览器窗口 相对于浏览器窗口处于右下角。并且拖动滚动位置固定变化。...由于视图本身是固定,它不会随浏览器窗口滚动滚动而变化,除非你在屏幕中移动浏览器窗口屏幕位置,或改变浏览器窗口显示大小,因此固定定位元素会始终位于浏览器窗口内视图某个位置,不会受文档流动影响...并且拖动滚动位置固定不变。

1K31

54个CSS重难点整理,12-24篇,进阶高薪必需要掌握知识点

属性值为 0 ,不加单位。 不使用 @import 前缀,它会影响 css 加载速度。 可维护性: 抽离 css, 提高可复用性。 样式与内容分离, 提高可维护性。...translate 不会触发浏览器重排和重绘,只会触发复合, 利用GPU效率高绝对定位会导致重排, 进而触发重绘, 利用CPU效率低 21、清除浮动3种方式 在父元素最后面加上<div style='...元素位置在屏幕滚动不会改变,⽐如回到顶部按钮都是用fixed固定定位 sticky 粘性定位,基于用户滚动位置来定位。...在 position:relative 与 position:fixed 定位之间切换。而页面滚动超出目标区域,它以固定定位呈现,否则以相对定位呈现。...在有滚动页面中,absolute 会跟着父元素进行移动,fixed 固定在页面的具体位置。

1.2K10

移动端吸顶fixbar解决方案

需求背景 经常会有这样需求,页面滚动到某一个位置,需要某个页面元素固定在屏幕顶部,并且有时需要连续滚动吸顶。...iPhone 4s&5 / iOS 6&7 / Safari 下,页面底部footer输入框失去焦点,header定位出错。页面有滚动动作,header定位恢复正常。...iPhone 4 / iOS 5 / Safari下,页面发生跳转,再退回,fixed区域消失,内容获得焦点,fixed区域才显示。...部分低版本Android对支持不好,video poster属性设置封面图会遮挡fixed元素。 QQ、UC浏览器滚动页面footer定位错误,会往上偏移,是由于地址栏收起缘故。...在目标区域在屏幕中可见,它行为就像position:relative; 而页面滚动超出目标区域,它表现就像position:fixed,它会定在目标位置。

2.9K30

CSS基础-定位:static, relative, absolute, fixed

常见问题:通常不会直接出现问题,但容易忽视其重要性,尤其是在理解其他定位方式。 避免策略:认识到static是基础,对比其他定位方式,思考其不同之处。...常见问题: 定位基准:忘记或误解绝对定位参照物,导致元素出现在意料之外位置。 覆盖问题:绝对定位元素容易覆盖其他内容,未适当调整z-index。...布局干扰:固定元素可能会遮挡或干扰页面其他部分,尤其是滚动。 避免策略: 测试不同浏览器和设备,确保固定元素在各平台上表现一致。...设计时考虑页面滚动情况,合理安排固定元素位置和尺寸,避免遮挡重要内容。 实战代码示例 <!...:static元素正常排列,relative元素在原位置基础偏移,absolute元素相对于.container定位,而fixed元素则固定在浏览器窗口底部左侧。

7310

CSS笔记(14)

CSS定位 为什么需要定位? 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子. 定位则是可以让盒子自由在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子....子绝父相: 子级使用绝对定位,父级使用相对定位 子级绝对定位,不会占有位置,可以放到父盒子里面的任意地方,不会影响其他兄弟盒子.相当于浮动起来了,脱离了标准流,不占用原来位置....当然,子绝父相不是永远不变,如果父元素不需要占有位置,子绝父绝也会遇到. 4.固定定位 固定定位是元素固定于浏览器可视区位置.主要使用场景:可以在浏览器页面滚动元素元素位置不会改变....跟父元素没有任何关系 不随滚动滚动 固定定位不再占有原先位置 固定定位也是脱标的,其实固定定位也可以看做是一种特殊绝对定位. 固定定位小技巧:固定在版心右侧位置....块级元素添加绝对或固定定位,如果不给宽度或者高度,默认大小是内容大小(不加定位的话宽度是父级元素宽度). 浮动元素,绝对定位(固定定位)元素不会触发外边距合并问题.

57210

什么是BFC

设置了sticky元素,在屏幕范围(viewport)该元素位置并不受到定位影响(设置是top、left等属性无效),该元素位置将要移出偏移范围定位又会变成fixed,根据设置left、...可以知道sticky属性有以下几个特点: 该元素并不脱离文档流,仍然保留元素原本在文档流中位置。 元素在容器中被滚动超过指定偏移值,元素在容器内固定在定位置。...亦即如果你设置了top:50px,那么在sticky元素到达距离相对定位元素顶部50px位置固定,不再向上移动。...:float 除 none 以外绝对定位元素:position (absolute、fixed) display 为 inline-block、table-cells、flex overflow...左浮动元素会盖住未浮动元素一部分区域,但是文字不会被覆盖,形成了文字环绕效果,如果不想这样,我们可以采用BFC方式,和上面的例子相同,添加一个overflow:hidden来触发BFC即可 <div

83320

纯css实现纵向滚动固定表头与横向内容滚动

这次要实现目标是类似这种,纵向滚动表头固定,横向滚动,表头跟着滚动 ?...image.png 纵向滚动是挺好实现,我开始是在内容表格外面套了一个div,之后设置overflow-y:auto就实现纵向滚动了。 但横向滚动呢?...滚动条被滚走了 然后想到了是用js来同步,可以是可以,但是还是想挣扎一下。 之后想到了fixed,发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。...最后突然想到一个position新属性,sticky 设置了position: sticky ,在屏幕范围(viewport)该元素位置并不受到定位影响(设置是top、left等属性无效),该元素位置将要移出偏移范围...,定位又会变成fixed,根据设置left、top等属性成固定位效果(https://www.cnblogs.com/s1nker/p/4835079.html)。

5K00

CSS笔记

:hidden 隐藏元素仍需占用与未隐藏之前一样空间 定位 postion: absolute(绝对定位),其位置相对于最近已定位父元素,如果元素没有已定位父元素那么它位置相对于 static...relative(相对定位),其位置相对其正常位置。相对定位元素经常被用来作为绝对定位元素容器块。 fixed,元素位置相对于浏览器窗口,是固定位置。即使窗口是滚动它也不会移动。...sticky(粘性定位),基于用户滚动位置来定位,在未滚动出目标区域,它行为就像position:relative;它表现就像 position:fixed;,它会定在目标位置。...内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容。...auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。 inherit 规定应该从父元素继承 overflow 属性值。 浮动 clear 指定不允许元素周围有浮动元素。

1.9K20

「译」前端项目中常见 CSS 问题

在 macOS 下 Chrome 中,这看起来不错,但是在 Windows 下 Chrome 中,滚动条始终存在(即使内容很短)。这是因为 scroll-y 会无视内容,一直显示滚动条。...但是,如果没有添加 flex-wrap ,那么屏幕尺寸缩小时候,将会出现水平滚动条。...弹性项目数量不定时,不要使用 justify-content: space-between 对一个弹性容器应用 justify-content: space-between 它会为元素分配空间,使它们互相之间距离相等...长词和链接 在手机屏幕浏览文章时候,一个长词或者内联链接可能会导致页面出现水平滚动条。使用 CSS word-break 可以防止这个问题。...Sara Soueidan 写了一篇不错文章讨论过这个问题。 8. 视窗高度不足将元素固定在屏幕顶部 如果你在视窗不够高时候将一个元素固定在屏幕顶部,会发生什么事呢?

2.1K10

CSS 定位详解

所以,只要理解了它们基点是什么,就很容易掌握这三个属性值。 这三种定位不会其他元素位置产生影响,因此元素之间可能产生重叠。...3.3 fixed 属性值 fixed表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。这会导致元素位置不随页面滚动而变化,好像固定在网页一样。 ?...因此,它能够形成"动态固定"效果。比如,网页搜索工具栏,初始加载在自己默认位置(relative定位)。 ? 页面向下滚动,工具栏变成固定位置,始终停留在页面头部(fixed定位)。 ?...它具体规则是,页面滚动,父元素开始脱离视口(即部分不可见),只要与sticky元素距离达到生效门槛,relative定位自动切换为fixed定位;等到父元素完全脱离视口(即完全不可见),fixed...div { position: sticky; top: 0; } 它原理是页面向下滚动,每张图片都会变成fixed定位,导致后一张图片重叠在前一张图片上面。详细解释可以看这里。

1.7K40

精读《高性能表格》

单元格使用 DIV 绝对定位 即每个单元格都是用绝对定位 DIV 实现,整个表格都是有独立计算位置 DIV 拼接而成: 这样做前提是: 所有单元格位置都要提前计算,这里可以利用 web worker...如图所示有 16 个单元格,当我们向右下滑动一格,中间 3x3 即 9 个格子区域是完全不会重新渲染,这样零散绝对定位分布可以最大程度维持单元格本来位置。...模拟滚动,实际整个表格都是 overflow: hidden ,浏览器就不会给出自带滚动条了,我们需要用 DIV 做出虚拟滚动条代替,这个相对容易。...当我们把 Buffer 区域移除,发现整个屏幕内渲染单元格在 1000 个以内,现代浏览器甚至配合 Windows 都能快速完成滚动前刷新,并不会影响滚动流畅性。...宽度计算完毕后,快速刷新当前屏幕单元格宽度,但在宽度校准同时,维持可视区域内左对齐不变,如下图所示: 这样滚动过程中虽然单元格会被突然撑开,但位置并不会产生相对移动,与提前全量撑开后视觉内容相同,因此用户体验并不会有实际影响

1.1K40

前端如何实现高性能表格?

单元格使用 DIV 绝对定位 即每个单元格都是用绝对定位 DIV 实现,整个表格都是有独立计算位置 DIV 拼接而成: 这样做前提是: 所有单元格位置都要提前计算,这里可以利用 web worker...如图所示有 16 个单元格,当我们向右下滑动一格,中间 3x3 即 9 个格子区域是完全不会重新渲染,这样零散绝对定位分布可以最大程度维持单元格本来位置。...模拟滚动,实际整个表格都是 overflow: hidden ,浏览器就不会给出自带滚动条了,我们需要用 DIV 做出虚拟滚动条代替,这个相对容易。...当我们把 Buffer 区域移除,发现整个屏幕内渲染单元格在 1000 个以内,现代浏览器甚至配合 Windows 都能快速完成滚动前刷新,并不会影响滚动流畅性。...宽度计算完毕后,快速刷新当前屏幕单元格宽度,但在宽度校准同时,维持可视区域内左对齐不变,如下图所示: 这样滚动过程中虽然单元格会被突然撑开,但位置并不会产生相对移动,与提前全量撑开后视觉内容相同,因此用户体验并不会有实际影响

3.2K10
领券