相对于绝对定位元素的定位 - 有可能吗?

2024-04-03

我在页面上有一些绝对定位的空间,然后在这个空间中有多个绝对定位的元素...效果很好...每当我需要添加另一个元素时,我不必担心页面流量.. .我只是使用 x-y 平面将其放在我想要的位置。

我遇到的问题是……现在我在绝对定位元素之一中有一些动态内容……随着它的增长,它在底部元素下方具有 z - 索引,因此它只是在其下方的元素下方扩展。

我希望它下面的元素随着上面的元素展开而向下移动。

我尝试将下面的 elemenet 的位置设置为“相对”,但这仅相对于父 div...而不是其兄弟 div...因此它跳转到页面顶部。 “静态”定位与跳到顶部具有相同的效果。看起来绝对定位的元素基本上被相对和静态定位的元素忽略了。

有没有办法让同级 div 随着其同级的成长而移动?

有什么方法可以让相对定位的元素“意识到”绝对定位的元素吗?

我喜欢绝对定位的元素,所以如果可能的话,我希望在扩展内容的同时仍然使用它们。


绝对定位的元素会忽略并被页面上的其他所有元素忽略,从而有效地将其从文档流中取出,因此严格来说,您无法执行您所要求的操作。

为了获得相同的效果,您可以在此处将两个元素包装在绝对定位的 div 中,并为它们提供彼此的相对定位。然后顶部 div 将始终保持在同一位置,底部 div 将根据需要向下移动。

<style>
    #wrapper { position:absolute; }
    #i_will_expand { position:relative; top:0px; left:0px; }
    #i_will_move_down { position:relative; top:0px; left:0px; }
</style>

<div id="wrapper">
    <div id="i_will_expand"></div>
    <div id="i_will_move_down"></div>
</div>

请记住,如果下面还有其他内容,这些元素将覆盖它们,但这就是使用绝对定位的问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

相对于绝对定位元素的定位 - 有可能吗? 的相关文章

  • 如何从iframe访问文档中的

    I have an iframe 我在检查器元素中发现 img 标签位于具有 body 标签的 document 中 img src Images landingpage jpg 我需要访问此图像 landing page jpg 以便更改
  • Highcharts - 使用选定的饼图切片获得 3D 效果

    在 highcharts 中 我试图使当用户选择或将鼠标悬停在饼图的切片上时 该切片会产生沿 z 轴 朝向用户 上升的效果 我试图通过 css 设置阴影过滤器并使切片的边框更宽 填充颜色相同 来实现此目的 然而 我面临的问题是切片仍然可以位
  • 将图例标签设置为块

    我已经在以下网址设置了我的问题的演示 http jsfiddle net YHHg7 4 http jsfiddle net YHHg7 4 我正在尝试执行以下操作 legend display block border bottom 1p
  • 哪种 Javascript 解决方案(不是 .htc)可以真正在 IE7 和 8 中实现抗锯齿圆角?

    哪种 JavaScript 解决方案 不是 htc 确实可以在 IE7 和 8 中实现抗锯齿圆角CSS3在支持的浏览器中给出 我尝试了很多 http www ruzee com blog ruzeeborders http www ruze
  • Bootstrap 标签栏平滑移动导航按钮

    我有一个用于切换块的普通引导选项卡面板 在导航中切换块时 活动选项卡会突出显示 但现在 当我单击活动选项卡的背景时 它会立即发生变化 是否可以使切换选项卡时背景不会立即改变 而是根据需要哪个选项卡而平滑地左右移动 这可以用以下方法完成吗cs
  • a:悬停颜色不起作用

    一件很奇怪的事情 我想在悬停时更改链接的文本颜色和背景颜色 这是代码 css link menu a color white display block height 100 width 100 text decoration none t
  • JavaFX使节点覆盖父节点边框颜色

    我有一个如下所示的节点 仅使用 css 我希望标签覆盖其父边框颜色 因此标签下方的边框颜色部分变得不可见 我用来制作这个边框的CSS代码 fx border color black fx border width 3 fx border r
  • 使用溢出支持定位粘性填充材料[重复]

    这个问题在这里已经有答案了 我在用position sticky在我的应用程序中 在使用overflow属性来显示滚动条 我已经寻找了一个确实支持这种情况的polyfill 但到目前为止没有任何运气 有谁知道这样的polyfill shim
  • HTML 表格 - 固定列宽和多个可变列宽

    我必须建立一个有 5 列的表 表格宽度是可变的 内容宽度的 50 有些列包含固定大小的按钮 因此这些列应该有一个固定大小 例如 100px 有些列中有文本 所以我希望这些列具有可变的列宽 例如 Column1 tablewidth sum
  • rvest 和 NHL 统计数据的 CSS 选择器问题

    我想从 hockey reference com 中抓取数据 特别是从以下链接中抓取数据 https www hockey reference com leagues NHL 1991 html https www hockey refer
  • 如何修复 IE6 上的不透明度

    如何修复 IE6 上的不透明度 此代码不适用于 IE6 filter alpha opacity 50 moz opacity 0 5 khtml opacity 0 5 opacity 0 5 还有这段代码 description ani
  • 伪元素和 SELECT 标签

    是否select标签允许使用 after选择器是为了在之后创建一个伪元素吗 我在 Mac 上尝试过 Chrome Safari 和 Firefox 但似乎不起作用 这是我使用过的折衷方案 http jsfiddle net pht9d295
  • 自动调整Google网站嵌入代码的高度(html)

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协
  • 滚动时输入自动完成位置错误(chrome)

    我在输入文本的默认自动完成功能方面遇到了一些麻烦 滚动时它不会相应移动 我希望自动完成文本保留在输入的正下方 有办法做到这一点吗 我在 Chrome 浏览器版本 57 0 2987 133 中发生这种情况 fiddle https jsfi
  • 当鼠标悬停在伪元素上时触发CSS动画?

    我试图在伪元素悬停时触发 CSS 动画 我目前有 2 个视频 显示鼠标悬停在浏览器的 50 一侧 我想应用类似的效果来为某些文本添加动画效果 我想要 p 标签在移动时向上移动并淡入 p h1 同时以同样的方式标记 就像这个网站一样 http
  • Twitter bootstrap:居中缩略图

    我有一个缩略图列表 它们有固定的尺寸 我希望连续缩略图的数量随着窗口的宽度而变化 使用 Twitter Bootstrap 这很容易 http jsfiddle net charlesbourasseau 5WvAL http jsfidd
  • 如何向 Rails 应用程序添加自定义字体?

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底
  • 如何适应特定子元素的宽度?

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • @font-face 和 font-variant 是个坏主意吗?

    如果我使用 font face字体和font variant small caps对于相同的选择器 字体将回退到 Safari 中的下一个系统默认字体 我该如何解决这个问题 我一开始在创建一个示例来复制您的问题时遇到了一些麻烦 这让我意识到

随机推荐

  • 如何配置 Visual Studio 代码以使用 Mac 的标准选项卡切换快捷方式?

    大多数具有选项卡式界面的 OS X 应用程序允许使用Cmd Shift and Cmd Shift 切换选项卡 VSCode 不遵循这一点 有没有办法将其配置为使用这些快捷方式快速切换到下一个 向右 和上一个 向左 选项卡 这种行为不同于C
  • 如何确定 git 历史记录是否是线性的?

    给定两个 git 提交 我如何确定 最好使用管道命令 它们之间的历史记录是否是线性的 换句话说 我想知道我是否有这个 A B C D E F G 而不是这个 C A B E F G D git log min parents 2只会显示至少
  • Scala - 如何在 for 理解块中使用 foreach 循环?

    我有一个简单的代码 override def createContributorsList url String params String F List Contributor getContributorsFromClient url
  • WPF:截屏的方法

    希望修改以下内容以从所有显示器上截取屏幕截图 我尝试过调整它 但我的图像是空白的 写入test png是为了测试 这byte 将被发送到接收应用程序 public byte Take int screenWidth Convert ToIn
  • FirebaseInstanceIdService getToken 返回 null

    我尝试将 FCM 通知添加到我的应用程序中 但出于某种原因 FirebaseInstanceId getInstance getToken 返回 null 由于我没有得到任何堆栈跟踪 我最好的猜测是 FirebaseInstanceIdSe
  • 从 C++ 代码和命令行生成相同的 Key 和 IV

    我的命令行工具 openssl 有问题 或者我的 C 代码有问题 我不知道哪个是不正确的 但是当我使用这两种方法从 passphase 和盐生成密钥和 IV 时 我没有得到相同的密钥 IV 值 您可以看到代码或命令行是否存在任何拼写错误或问
  • 在 foreach 循环中,使用 & 符号或基于键重新分配哪个更好?

    考虑以下 PHP 代码 Method 1 array array 1 2 3 4 5 foreach array as i gt number number array i number print r array Method 2 arr
  • 将 JMeter 报告转换为 JUnit 报告

    如何将 JMeter 报告转换为 JUnit 报告 有些工具 例如 VSTS 知道如何集成 JUnit 报告 但不知道如何集成 JMeter 报告 尽管它们可以运行 JMeter 我创建了一个 XSLT 将 XML JMeter 报告转换为
  • PyMongo Aggregate 如何获取executionStats

    我正在尝试获取特定 mongo 聚合查询的执行统计信息 我运行 db command 但没有给出 执行状态 这就是我正在努力做的事情 如何使用 db command 获取 Python Mongodb Aggregate 解释 https
  • 如何将一个框架分成两部分

    这是俄罗斯方块 玻璃 蓝色 位于左侧 控件 红色面板 位于右侧 换句话说 现在我只想将框架分为两部分 左 较宽 部分是蓝色 右部分是红色 而已 但我似乎没能做到这一点 所以 我的逻辑是 让框架有FlowLayout 然后我添加两个面板 这意
  • POSIX srandom(...) 和 random() 函数的 Windows 等效项?

    我正在尝试将一些代码从 UNIX 移植到 Windows 并且我需要 POSIX 的实现srandom x and random 对于给定的种子函数x 生成与符合 POSIX 1 2001 的编号规则相同的编号规则 Windows 上有哪些
  • 带有 viewPager 的按钮活动?

    请不要评判我 我对 android 开发非常陌生 我想用 viewPager 制作一个应用程序 我有三个具有三种不同布局的页面 但我只是不知道如何处理 viewPager 上第二页上的按钮 我发现了这个问题 如何在viewpager中编写按
  • LinkedHashMap 变量在 foreach 循环之外不可访问

    这是我的代码 var link scala collection mutable LinkedHashMap String String var fieldTypeMapRDD fixedRDD mapPartitionsWithIndex
  • 如何解决legacy-install-failure错误?

    building matplotlib ft2font extension error Microsoft Visual C 14 0 or greater is required Get it with Microsoft C Build
  • 使用 goto 的最佳实践

    使用是否正确goto在这段代码中 还有其他选择吗 return ExecuteReader cmd reader gt List
  • 计算网页上的滚动结束

    我需要计算网页上滚动的结束位置 以便我可以进行 Ajax 调用 我在 stackoverflow 中搜索了帖子 但解决方案对我不起作用 我使用下面的代码来确定 window scrollTop document height window
  • 如何在express + Passport js中删除注销时的cookie?

    我想 删除注销时的cookie 我做不到 我用谷歌搜索答案并找到以下方法 为 cookie 指定新的过期日期 res cookie connect sid expires new Date 1 path 使用以下行删除 cookie res
  • HRESULT 0x80070057 是什么意思?为什么我的程序崩溃了?

    我编写了一个程序 它拍摄两张图像 然后对它们运行一种算法 以隔离 前景 中的一只手 并将手势与已知的手势相匹配 几天前 我使用一些测试参数运行了该程序 只是为了测试我所做的一些调整 一切都运行良好 从那时起我就没有碰过代码 今天 我用两个新
  • 当我们从 s3 中的 csv 文件读取数据并在 aws athena 中创建表时如何跳过标题。

    我正在尝试从 s3 存储桶读取 csv 数据并在 AWS Athena 中创建一个表 我的表在创建时无法跳过 CSV 文件的标题信息 查询示例 CREATE EXTERNAL TABLE IF NOT EXISTS table name e
  • 相对于绝对定位元素的定位 - 有可能吗?

    我在页面上有一些绝对定位的空间 然后在这个空间中有多个绝对定位的元素 效果很好 每当我需要添加另一个元素时 我不必担心页面流量 我只是使用 x y 平面将其放在我想要的位置 我遇到的问题是 现在我在绝对定位元素之一中有一些动态内容 随着它的