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

我使用的是绝对位置,但当窗口或屏幕大小改变时,我的元素不会停留在我放置它们的位置

对于这个问题,您可以使用相对位置来解决元素不会停留在所放置位置的问题。相对位置是相对于元素原本应该在的位置进行定位的,而不是相对于窗口或屏幕进行定位。

您可以使用CSS的定位属性来控制元素的位置。以下是一些常用的定位属性:

  1. 相对定位(relative):使用相对定位,元素会相对于其自身的初始位置进行移动,而不会影响其他元素的布局。您可以使用top、bottom、left、right属性来调整元素的位置。
  2. 绝对定位(absolute):使用绝对定位,元素会相对于其最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于文档的初始位置进行定位。同样可以使用top、bottom、left、right属性来调整元素的位置。
  3. 固定定位(fixed):使用固定定位,元素会相对于浏览器窗口进行定位,不会随滚动条的滚动而移动。也可以使用top、bottom、left、right属性来调整元素的位置。

除了定位属性外,您还可以使用CSS媒体查询来根据窗口或屏幕的大小调整元素的位置。媒体查询可以根据不同的媒体类型(如屏幕、打印等)和媒体特性(如宽度、高度等)来应用不同的CSS样式。通过设置不同的样式,您可以在不同的屏幕尺寸下改变元素的位置。

最后,关于推荐的腾讯云相关产品,腾讯云提供了丰富的云计算产品和解决方案,包括云服务器、容器服务、数据库、CDN加速等。您可以根据具体的需求选择适合的产品和服务。

请注意,本回答仅供参考,具体的实现方法可能因个人需求和技术选择而有所不同。

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

相关·内容

2021前端面试高频 HTML + CSS

什么是回流 和 重绘 回流 ❝ 1. 概念 当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。...页面初始渲染,这是开销最大的一次重排 添加/删除可见的DOM元素 改变元素位置 改变元素尺寸,比如边距、填充、边框、宽度和高度等 改变元素内容,比如文字数量,图片大小等 改变元素字体大小 改变浏览器窗口尺寸...❞ relative 相对定位 ❝元素会放置在定位时的位置,不改变原有布局,通过改变 top, right, bottom, left 来改变所在位置,但原所在位置会留下预留空间。...元素的位置在屏幕滚动时不会改变。 ❞ sticky 粘性定位 ❝元素根据正常文档流进行定位,然后相对它的最近滚动祖先 和 最近块级祖先 。...rem rem是CSS3新增的一个相对单位,使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

95040

【CSS3】css开篇基础(4)

绝对定位 绝对定位不会保留原来的位置(脱离文档流),那后面盒子就会往上占了它的位置; 如果没有祖先元素或者祖先元素没有定位,则以浏览器为基准定位; 如果祖先元素有定位(可以是相对、绝对或者固定定位....element { position: absolute; top: 50%; left: 50%; } 固定定位 固定定位相对于浏览器窗口,脱离文档流,使用fixed的元素不会随窗口的滚动而滚动...如果元素离开视口顶部时没有足够的空间放置它,它将像相对定位一样继续滚动,直到可以固定在指定位置。 粘性定位不脱标,原有空间一直不变。...在设计中,粘性定位常用于创建导航栏在用户滚动时保持在屏幕顶部或侧边的效果,或者创建吸顶效果等。...浮动元素不会压住标准流文字 浮动元素会脱标,当它压住标准流时,文字不会被压住,会环绕在周围显示。 而定位元素脱标压住标准流时,文字会被压住。

6710
  • 面试官:CSS 面试题集锦

    下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询...它的特殊之处在于它不用像absolute疯狂“找爸爸”,它天生参照于浏览器窗口!当为对象设置固定定位后,该对象即处于浏览器窗口画面中的固定位置,无视文档长短、窗口大小和滚条滚动。...3.相对大小的字体,字体也不能使用绝对大小(px),只能使用相对大小(em)或者高清方案(rem),rem不局限字体大小,而前面的width也可以使用,代替百分百。...改变transform或opacity不会触发浏览器重新布局(reflow)或重绘(repaint), 只会触发复合(compositions)(复合是什么,我也不懂,没听说过,有知道的朋友可以在留言区告诉我...transform使浏览器为元素创建一个 GPU 图层 translate改变位置时,元素依然会占据其原始空间 而改变绝对定位会触发重新布局,进而触发重绘和复合。 改变绝对定位会使用到 CPU。

    3.3K30

    再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetXTop,clentX

    IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。...,会随窗口的显示大小改变     obj.clientHeight = (height + padding)  //元素的高     clientTop、clientLeft 这两个返回的是元素周围边框的厚度...    obj.offsetTop  //元素相对于父元素的top 如果弹框的宽度(offsetWidth)+距离左边的距离(offsetLeft)大于父元素的宽度,则判断为超出外部元素范围,需要动态改变弹框距离边框的位置...获取对象的滚动高度     scrollLeft 已滚动过去的宽度 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离     scrollTop  设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离...js中getBoundingClientRect 当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。

    1.5K20

    控件anchor和dock属性_控件的常用属性

    大家好,又见面了,我是你们的朋友全栈君。...在设计窗体时,这两个属性特别有用,如果用户认为改变窗口的大小并不容易,应确保窗口看起来显示的不是那么乱,并编写很多代码来实现这个效果,许多程序解决这个问题都是禁止给窗口重新设置大小 这显然是解决问题的最简单的方法...1、Anchor属性用于指定在用户重新设置窗口的大小时控件应该如何响应,可以指定如果控件重新设置了大小,就根据控件的边界去锁定它,或者其大小不变,但根据窗口的边界来锚定它的位置 正如名称暗示的那样...2、Dock属性用于指定控件应该停放在窗口的边框上,用户重新设置了窗口的大小,这个控件将继续停放在窗口的边框上,例如,如果指定控件停留在窗口的底部边界上,则无论窗口的大小怎么改变,这个控件都将改变大小,...或移动其位置,确保总是位于屏幕的底部。

    1.4K30

    【CSS】1287- 一行 CSS 实现 10 种强大的布局

    通过使用 Flexbox 实现此效果,您不需要在屏幕尺寸发生变化时通过媒体查询来调整这些元素的位置。...1 1 150px; } 现在,当您增加或减少屏幕尺寸时,这些 flex 项目会缩小和增长。...煎饼堆栈布局:grid-template-rows: auto 1fr auto 与 Deconstructed Pancake 不同,当屏幕尺寸改变时,本例不会包含它的子元素。...这可以自动放置这些子元素。这些子元素的基本最小值为 150px ,最大值为 1fr ,这意味着在较小的屏幕上,它们将占据整个 1fr 宽度,当它们达到 150px 宽度时,它们将开始流到同一条线上。...使用 auto-fit ,当它们的水平尺寸超过 150px 时,框将拉伸以填充整个剩余空间。

    4.7K20

    10分钟内就可以学会的几个CSS高招

    它还在 HTML 中提供了有用的注释,例如当一个元素导致另一个元素溢出时,Firefox 还为 flex 和网格布局提供了非常漂亮的图形,谈到哪个布局或元素相对于彼此的位置历来是最重要的布局之一。...3、 Flexbox 很棒 一种选择是给子元素绝对定位,然后使用 top 和 left 属性移动到右下角,然后将其转换回50%,以将其放在可以工作的中心,但现代CSS有一种更好的方法是 使用flexbox...,允许你在 UI 中的任何位置创建灵活的列或行,当元素具有显示 flex 时,它还具有 x 和 y 轴,你可以在其上对齐其子项。...当涉及到布局时,Flexbox 通常是我使用的第一个工具,但它确实有一个主要缺点,如果你有一个包含许多相交行和列的大型复杂 UI,你最终可能会在 HTML 中使用大量容器或包装元素。 ?...hack,你在顶部放置 56.25 填充然后给子元素绝对定位。

    1.4K20

    干货 | 一分钟了解PyQt的绝对定位

    布局管理是GUI编程中的重要部分。布局管理是一种如何在应用窗口上放置组件的方法。 我们可以通过两种基本方式来管理布局。 绝对定位和布局类。...今天我们首先来谈谈的是PyQt编程中的绝对定位,绝对定位就是每个控件按程序员自己指定的位置进行放置。 简单明了就是"不要你觉得,要我觉得"。...当你使用绝对定位,我们首先要了解以下窗口限制: 1.如果我们调整了窗口的大小,窗口里面控件的大小和位置保持不变,不会随着窗口的改变而改变。 2.在不同平台上,应用程序看起来可能会不同。...我们通过提供x和y的坐标值来定位它们。坐标系的原点是控件的左上角。x值增长是由左到右。y值增长是从上到下。...如下代码截图: lbl3 = QLabel('你的支持是我不断前行的动力', self) lbl3.move(55, 70) 整个程序执行起来如下所示: 总结一下绝对定位的缺点: 1.窗口变化时

    1.1K20

    最新iOS设计规范九|10大系统能力(System Capabilities)

    当人们放置物体时使用可用的信息立即做出响应;然后在完成表面检测后,微调对象的位置。 考虑引导人们走向屏幕外的虚拟对象。有时,人们可能很难找到不在屏幕上放置的对象。...当图像可能在环境中移动时,或者当附加的动画或虚拟对象与图像大小相比较小时,请使用跟踪的图像。 与人沟通 如果必须显示说明文字,请使用易于理解的术语。AR是一个可能使某些人感到恐惧的高级概念。...当用户切换多任务模式,旋转屏幕或更改文本大小或区域时,自适应界面会自动调整其UI元素和布局。 为中断做好准备,并准备好恢复。您的应用可以随时中断。...偏好全天变化的动态信息。 如果窗口小部件的内容从未改变,则人们可能不会将其保持在显眼位置。尽管小部件不会每分钟更新一次,但是找到保持其内容新鲜以邀请频繁查看的方法很重要。 寻找惊喜和喜悦的机会。...使用设备时,它会出现在屏幕顶部几秒钟,然后消失。 警报。在使用设备时,它会显示在屏幕顶部,并停留在屏幕顶部,直到手动将其关闭。

    4.3K20

    前端课程——定位继承与层叠

    定位 定位属性为position static: 默认值,表示元素为静态定位。指定元素使用正常的布局行为,即元素在文档常规流中当 前的布局位置。 absolute: 表示元素为绝对定位。...元素先放置在未添加定位时的位置,再在不改变页面布局的前提 下调整元素位置。...简单来说定位就是规定被定位元素距离页面顶部及左边的距离 绝对定位 开启后脱离文档流 不设置位置的偏移量则位置不会变化 偏移量 正值(top)向下 负值(top)向上 绝对定位的集中情况 如果当前元素的父级元素是...相对于父级元素的定位 bottom值 默认加载完毕后的位置 相对于当前浏览器窗口的底部 绝对定位依旧是相对于页面的定位,而不是相对于浏览器窗口的定位 固定定位 相对于浏览器窗口的定位...尽管CSS样式会来自这些不同的源,但它们的作用范围是重叠的,而层叠则定义了它们如何相互作用。

    90431

    CSS基础知识

    但注意有一些css样式是不具有继承性的。...内联元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高及顶部和底部边距不可设置; 3、元素的宽度就是它包含的文字或图片的宽度,不可改变。 四....如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口 相对于浏览器窗口处于右下角。并且拖动滚动条时位置固定变化。... (3) 固定定位(position: fixed),与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。...由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响

    1K31

    前端性能优化 | 回流与重绘

    回流会导致浏览器重新计算元素的位置和大小,然后重新绘制到屏幕上,是一种相对耗费资源的操作。...修改元素的位置、尺寸或层级关系:修改元素的位置、尺寸或层级关系(如改变元素的宽度、高度、margin、padding、top、left、z-index等)会导致元素重新布局,从而触发回流。...浏览器窗口的变化:当浏览器窗口的大小变化时,需要重新计算并布局页面中的元素,从而触发回流。...:当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置以下这些操作会导致重绘修改元素的颜色、背景色、边框颜色等样式属性:例如,将一个元素的背景色由红色改为蓝色,这样只会引发元素的重绘,而不会触发布局的改变...避免频繁改变窗口大小:改变窗口大小会触发回流,所以尽量避免频繁改变窗口大小。

    1.8K20

    如何使用纯 CSS 制作四子连珠游戏

    在同一列中掉落的圆盘会堆叠在一起。 首先我为每个圆孔放置了两个 checkbox 。当它们都没有被选中时,圆孔就被认为是空的,当其中一个被选中时,相应的玩家就会把他的圆盘放进去。...为了获得更好的用户体验,我希望交互区域可以更大一些,所以合理的做法是让玩家点击一个列来移动圆盘。通过在合适的元素上添加绝对和相对位置,我将同一列的控件相互叠加。这样,在每一列中只能选择最下面的圆孔。...更好的方式是使用 letter-spacing,因为它只在一个维度上改变了大小。出乎意料的是,即使是一个字母也有字母间距(在字母后面呈现),两个字母就有两个字母间距。...我一直以为伪元素显示的计数值是 radio 按钮的父元素,可惜不是。但是,我注意到伪元素的宽度改变了其父元素的宽度,在本例中父元素是 radio 按钮的容器。...有一个好处是不会出现检测错误的列或行。结果的显示也必须进行修改,任何匹配列使用的 ::after 伪元素都应该是一致的。因此,必须在最后一个位置之后添加一个伪第八列。

    2K20

    干货 | 如何实现jQuery响应式瀑布流 ?

    开门见山,本文介绍响应式的瀑布流的实现方法。 最终效果图如下,改变浏览器大小效果更棒哦~ ?...来保存每个元素宽高 使用数组boxArr保存每一竖列的高度,即每一竖列最后一个box的底部位置 使用瀑布流原理计算每个box的位置(left和top),并保存到数组boxStyleArr 123456789101112131415161718192021222324...box ---- 根据数组boxStyleArr,将每个box使用绝对定位放置到相应位置 这里使用了动画效果,使所有box从左上角伸展 12345678910111213141516171819202122...---- 当屏幕大小改变时,触发重新计算box位置 为了避免浏览器频繁改变宽度,这里增加了个小判断 当屏幕改变后200毫秒内不再改变,才触发重新计算 123456789 $(window).on("load...---- 考虑图片加载 图片加载过程可能影响对box高度判断 可通过img.load来确保图片加载完成或者失败之后才进行计算 代码优化&封装 尽情发挥你的创造力吧 结束语 ---- 这个效果是我从别人的博客看到的

    1.8K20

    【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡

    ,但与常规的编程不同,iVX是一款无代码的开发语言,对于不懂开发的初学者来说,抛弃了常规编程语言中的代码,使开发更加简单并高效;iVX 在开发某些功能时自带了对应的模块,开发起来更加高效,并且对于程序员来说可以导出其代码进行二次开发...在选择项目创建时,将会看到有 绝对定位 应用和 相对定位 应用,这两者的区别分别如下: 绝对定位:使用绝对的 xy 坐标绘制应用元素(例如图片所在位置根据 xy 确定),之后将会通过示例详细讲解; 相对定位...:根据元素的相对位置在界面中进行定位,相对定位不会存在 xy 值(除非相对定位中存在一个绝对定位组件,例如画布)。...这些组件咱们将会在接下来的章节中进行讲解说明。 四、绝对定位与贺卡制作 4.1 绝对定位 绝对定位在 iVX 中指使用绝对的 xy 坐标对某一个元素进行位置上的定位。...接下来使用中文文本绘制出文本区域,使用中文文本的好处是可以使字体有中文文本样式: 在文本中输入新年快乐,并更改其颜色、字体、大小: 最后我们点击预览查看效果: 我们可以按F12

    1.2K20

    Unity基础教程系列(三)——复用对象(Object Pools)

    直接用它们本来的样子,不做任何改变。默认情况下,画布设置为一个Overlay,会渲染在游戏窗口的场景的最上层。 虽然屏幕空间的画布逻辑上不是存在于3D空间中,但它仍然会显示在场景窗口中。...不仅控制对象的位置、旋转和缩放,还控制它的矩形大小、枢轴点和锚点。 锚控制GUI对象相对于其父容器的位置,以及它对其父容器的大小变化的反应。我们把标签放在游戏窗口的左上角。...这允许我们选择附加到目标对象的组件的方法或属性。现在我们可以使用第三个下拉列表,选择Game。 ? (滑动条链接到属性) 我得到了一个输入字段,但第四个选项是0?...这会影响场景窗口,但不会影响游戏窗口。 ? (隐藏UI层) 3 对象池 每次实例化一个对象时,都必须分配内存。每次一个对象被销毁时,它使用的内存都必须被回收。但回收不会立即发生。...所以每次游戏会破坏一个形状,而不是我们应该把它们送回工厂回收。 回收形状是可行的,因为它们在使用过程中不会改变太多。它们有随机的transform、材质和颜色。

    2.9K10

    Unity性能调优手册8UI:Canvas,Layout,RaycastTarget,Mask,TextMeshPro,UI显示

    但是,您需要仔细考虑如何拆分它们,因为拆分画布将不适用于绘制批次。 Tips 当画布嵌套在画布下时,拆分画布也有效。如果子画布中包含的元素发生变化,则只会运行子画布的重建,而不会运行父画布。...UnityWhite是Unity内置的纹理,当Image或RawImage组件没有指定要使用的图像时使用(图8.1)。你可以看到UnityWhite是如何在框架中使用的调试器(图8.2)。...例如,如果不需要动态放置,例如根据内容改变放置位置的文本,则不需要使用Layout组件。如果您确实需要动态放置,或者如果它在屏幕上大量使用,那么最好使用您自己的脚本来控制它。...此外,如果需要将需求放置在相对于父元素的特定位置,即使父元素的大小发生了变化,也可以通过调整RectTransform锚点来实现。...当单击或触摸屏幕时,启用了此属性的对象将成为处理的目标,因此尽可能禁用此属性将提高性能 默认情况下启用此属性,但实际上许多图形并不需要启用此属性。

    80431

    创建华丽 UI 的 7条规则  第二部分 (2019年更新)

    方法一:将文本直接放置于图片上 我一直在考虑要不要把这个方法算进五种方法的一种,但设计上,直接将文字放置于图片上让视觉效果更好是可行的。 ?...这种方法有各种各样的问题和需要注意事项: 图像色调应该偏暗,并且竖直方向上不能有太大的色差。 文本必须是白色的。 测量不同尺寸的屏幕或窗口以确保图像显示正常。...这种渐变效果确实很难看出来,但确实是有的,绝对改善清晰度。 还要注意的是,这几张缩略图使用了文本阴影来进一步增强可读性,这个做法真棒!...通常,改变字体大小、大小写或字体权重会改变文本占用的区域大小,这种变化可以限制住悬浮效果。 所以还有哪些属性可以更改呢?...像艺术家一样借鉴 我第一次尝试设计一些应用程序元素 - 按钮,表,图表,弹出窗口 - 这是我第一次意识到我对如何让这些元素好看而知之甚少。 但幸运的是,我还没有发明任何新的 UI 元素。

    1.1K30

    JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。...我们已经知道 offsetHeight 是自身元素的宽度,而 scrollHeight 是内部元素的绝对宽度,包含内部元素的隐藏的部分。...LEFT: 为从左向右移的位置,即挂件距离屏幕左边缘的距离; clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离 offsetLeft 返回对象相对于父级对象的布局或坐标的...left值,就是以父级对象左上角为坐标原点,向右和向下为X、Y轴正方向的x坐标 pixelLeft 设置或返回对象相对于窗口左边的位置 scrollWidth 是对象的实际内容的宽,不包边线宽度...clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。

    7.5K20
    领券