程序员经验分享-hwhale

为什么我的绝对/固定位置元素没有位于我期望的位置？

2023-11-30

我刚刚学习CSS中的定位。根据我发现有用的文章，我开始尝试。

使用以下代码，我无法理解为什么绝对灰盒 div 位于其相对父级之外。我预计灰盒将位于容器的左上角。

.container {
  background: lightblue;
  position: relative;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}
<div class="container">
  <div class="box-orange"></div>
  <div class="box-blue"></div>
  <div class="box-green"></div>
  <div class="box-grey"></div>
</div>

在以下情况下也无法理解为什么灰色框不在左上角，而是移动到橙色框留下的空白区域之后。我刚刚将灰盒移动到容器 div 内的第二个位置。

.container {
  background: lightblue;
  position: relative;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}
<div class="container">
  <div class="box-orange"></div>
  <div class="box-grey"></div>
  <div class="box-blue"></div>
  <div class="box-green"></div>
</div>

我发现的所有详细文档（例如 MDN）和教程都只是用 2-3 个框演示了非常简单的示例。


要正确理解这一点，您需要参考官方规格在哪里可以找到方程的元素must满足：

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

我们没有任何边框和填充，因此在您的情况下它只是：

'top' + 'margin-top' + 'height' + 'margin-bottom' + 'bottom' = height of containing block

如果您阅读下面的内容，您会发现：

  1. “顶部”和“底部”是“自动”，“高度”不是“自动”，然后将“top”设置为静态位置，将“margin-top”和“margin-bottom”的“auto”值设置为0，并求解“bottom”。

所以在你的情况下，你已经设置了一个高度并保持top/bottom为 auto，因此 top 将被设置为静态位置

..更准确地说，“top”的静态位置是从包含块的上边缘到假设框的上边距边缘的距离，如果指定的“position”值具有，该假设框将是元素的第一个框一直是“静态”..

为了简单起见，如果您没有设置，它就是元素的位置position:absolute.

这是一个简单的说明，以便更好地理解

.container {
  background: lightblue;
  position: relative;
  padding:40px 20px;
  display:inline-block;
  vertical-align:top;
  width: 250px;
}


.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

.box-green {
  height:20px;
  background:green;
}
<div class="container">
  <div class="box-green"></div>
  <div class="box-grey" style="position:static;">I am static</div>
</div>

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey">I am absolute</div>
</div>

请注意，如果我们添加，则保留的第一个元素的静态位置position:absolute。我们没有指定任何顶部值，因此浏览器将使用默认值之一position:static元素的（默认位置）。

如果您不希望这样，只需设置顶部值，您就会陷入以下规则：

  1. “bottom”是“auto”，“top”和“height”不是“auto”，然后将“margin-top”和“margin-bottom”的“auto”值设置为0并求解“bottom”

.container {
  background: lightblue;
  position: relative;
  padding:40px 20px;
  display:inline-block;
  vertical-align:top;
  width: 250px;
}


.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
  top:0;
}

.box-green {
  height:20px;
  background:green;
}
<div class="container">
  <div class="box-green"></div>
  <div class="box-grey" style="position:static;">I am static</div>
</div>

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey"></div>
</div>

同样的逻辑适用于左边的财产

您可能还注意到这个词的使用包含块这在这里非常重要，并在相同规格

元素框的位置和大小有时是相对于某个矩形（称为元素的包含块）计算的。元素的包含块定义如下：

...

  1. 如果元素具有“position:absolute”，则包含块由最近的祖先以“position”为“absolute”、“relative”或“fixed”建立，如下所示：

...

这还不够，因为还有其他属性（如下所列）也建立了一个包含块，因此您可以将一个元素相对于未定位的祖先进行定位！

有关的：为什么在父级上应用 CSS 过滤器会破坏子级定位？

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

html

css

cssposition

为什么我的绝对/固定位置元素没有位于我期望的位置？ 的相关文章

  • 具有相等宽度和高度 TD 的响应式表格

    如何创建每个单元格 TD 具有相同宽度和高度的响应式 HTML 表格 因此 当我调整浏览器窗口的大小或调整表格容器的大小时 表格将调整大小 但每个单元格将具有相同的高度和宽度 基金会不关心这个 当我用固定宽度和高度 以像素为单位 初始化 T

  • 与容器内的大量元素（DOM、javascript）快速交互

    因此 我在容器 div 内有大量的 div 4000 5000 每个包含跨度 锚点 图像等 基本上我将它们的显示设置为无或根据条件阻止 这确实需要一些时间 在我更快地寻找东西时 我遇到了这个页面https developers google

  • 没有宽度/高度的 SVG 以自然尺寸渲染

    我有这个 SVG 但没有width or height属性 我有以下 HTML div class block img src https s3 eu vAmfIxVv kiwi svg div 使用以下CSS block display

  • 哪些浏览器支持 HTML5 WebSocket API？

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我将开发一个在浏览器中运行的即时消息应用程序 哪些浏览器支持WebSocket API

  • CSS 关键帧动画的随机“起点”

    我有一个带有垂直滚动背景图像的框列表 keyframes movie 0 background position 50 5 50 background position 50 95 0 background position 50 5 mo

  • 从 CSS 调用 javascript 函数

    我想知道是否有可能以任何方式 button width somePX height somePX button hover onmouseup func button 或类似的东西 我想这会有点酷吗 而不是为每个按钮编写 onmouseup

  • 使用 Javascript 增加 div 中的数字

    我对 Javascript 很陌生 所以我认为这是一个愚蠢的错误 function upvote var score parseInt document getElementById voteScore innerHTML score sc

  • 滚动在 chrome 中的 svg 异物内不起作用

    我在 svg 异物中有 div 带有溢出 auto 滚动仅适用于鼠标滚轮 无法拖动栏 它适用于 Firefox 但不适用于 chrome safari 如果 svg g 元素上没有转换 它就可以工作 参见小提琴 http jsfiddle

  • 图像上的文本和背景颜色叠加

    我正在尝试创建一个与图像大小完全匹配的纯色叠加层 并在该叠加层上显示文本 如果可能的话 我想仅使用 HTML 和 CSS 来完成此操作 图像可以是任何大小 并且将调整大小以适合其父容器并居中 像这样的东西 不起作用 HTML div cla

  • 如何使用溢出滚动设置 tbody 高度

    我在设置 tbody 高度宽度溢出滚动时遇到问题 h3 Table B h3 table style border 1px solid red width 300px display block thead tr td Name td td

  • 单击 DIV 时滚动到顶部？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • iOS 10.3 safari text-align：调整波斯语/阿拉伯语内容的错误

    在更新到 10 3 之前 我的网站在 iPhone 的所有移动浏览器上都能正常运行和查看 从我将 iOS 更新到 10 3 后 我的内容页面遇到了一个问题 内容被包装在 div CSS 属性为text align justify 我的内容在

  • Chrome 将 0 宽度的表格单元格显示为 1px

    在 Firefox 中 我相信是正确的 由于 width 0 看不到红色 div 但在 Chrome 中 它显示为具有 1px 宽度 这似乎是最新版本 Chrome 的问题 这把小提琴 http jsfiddle net bFZf4 显示问

  • 如何在 django 表单中设置自定义 HTML 属性？

    我有一个 Django 表单 它是页面的一部分 假设我有一个字段 search input forms CharField u Search word required False 我只能通过模板访问它 form search input

  • 如何在 CSS 中使用 3 位颜色代码而不是 6 位颜色代码？

    我最近检查了我的 CSS 文件 并将所有六位十六进制代码转换为简单的三位数代码 例如 我的 FDFEFF被缩短为 FFF 它呈现的颜色与以前几乎完全相同 在我看来 中间部分相当无用 删除它们在我的 CSS 文件中节省了整整 300 个字节

  • 将 HTML 编辑器的内容保存为桌面上的 HTML 文件

    我想通过单击按钮来保存 TinyMce HTML 编辑器的内容 TinyMce 是本地安装的 我在 Chrome 中使用它 我见过这个answer https stackoverflow com a 30740104 3154274然后on

  • 从动态服务器中抓取 html 列表数据

    哈喽大家好 抱歉提出转储问题 这是我最后的手段 我发誓我尝试了无数其他 Stackoverflow 问题 不同的框架等 但这些似乎没有帮助 我有以下问题 一个网站显示一个数据列表 前面有大量的 div li span 等标签 它是一个很大的

  • 如何正确编码 mailto 链接？

    我正在生成一些 HTML 并且我想生成 XSS 和数据库内容安全的mailto关联 这里使用的正确编码是什么 这个怎么样 myLiteral Text string Format mailto 0 Content Type text htm

  • 在CSS中重置Margins/Padding时使用*是错误的吗？

    应该避免以下内容 还是应该因其简单性而受到赞扬 作为记录 我在我构建的每个站点中都使用它 但我注意到它并不存在于许多主流 CSS 重置框架中 他们是否也不使用它 margin 0 padding 0 最好不要使用它 因为它会导致表单元素出现

  • Div 上的倾斜边框

    我正在尝试倾斜一个 div 类似于 使用 css 倾斜 div 的顶部而不倾斜文本 https stackoverflow com questions 13591584 slant the top of a div using css wi

随机推荐

  • getjson jquery 解析数组

    得到简化的阵列工作见下文 后续要解析的复杂数组请参阅here TLDR 想要从数组中获取每个标题并将其插入到 div 中 而不知道使用 Jquery getJSON 中的内容 Edit 数据来自一个软件 该软件每隔几秒就使用新数据输出 JS

  • 在 view-file.blade.php 中找不到类“Form”

    我正在尝试在视图文件中渲染文本输入字段 我不断收到此错误 在 view file blade php 中找不到类 form 模板 extends layouts app section content h1 New h1 Form open

  • bootstrap jquery show.bs.modal 事件不会触发

    我正在使用 bootstrap 3 文档中的模态示例 模态有效 但是我需要在 show bs modal 事件触发时访问它 现在我只是在尝试 myModal on show bs modal function alert hi 什么也没发生

  • 从 JS 中被拒绝的 Promise 中恢复

    我 大部分 使用本机承诺并尝试从错误中恢复并继续执行承诺链 实际上 我正在这样做 REST 查询以查看 ID 是否存在 请注意 这会返回一个延迟的 jquery then 成功表示ID存在 失败则停止 失败说明ID不存在 继续创建ID th

  • C#：C# 中是否有 Java 中的 TimerTask 的等效类？

    我正在寻找 C 中 Java 中是否有等效的 TimerTask 类 这里引用了Java的TimerTask http download oracle com javase 1 4 2 docs api java util TimerTas

  • CUDA纹理线性过滤

    在 CUDA C 编程指南第 5 版附录 E 2 线性滤波 中 指出 在这种过滤模式下 仅适用于浮点 纹理 纹理获取返回的值是 粗体部分让我感到困惑 做floating point仅指纹素类型 还是也指返回类型 例如 我声明了 3 个纹理

  • 如何使用谷歌翻译翻译整个网站

    我目前正在使用以下内容来翻译网页 http translate google com about intl en ALL tour html professional 问题是 当我将 Google 网站上生成的代码片段放到我的网页上时 用户

  • 创建可能案例的简单方法

    我有数据列表 例如 a 1 2 3 4 b a b c d e c 001 002 003 我想创建另一个新的列表 该列表由 a b c 的所有可能情况混合而成 如下所示 d 1a001 1a002 1a003 4e003 是否有任何模块或

  • 是否总是需要条件注释？

    在创建了一些网络应用程序之后 我真的认为一段时间后处理条件注释就不那么有趣了 对于这个问题有什么计划吗 处理不同的浏览器会更复杂还是更容易 某种形式的功能嗅探总是需要的 但希望将来这可以更多地基于更良性的脚本化对象嗅探形式 从而实现渐进增强

  • 如何比较两个日期时间字符串并返回小时数差异？ （bash外壳）

    我可以使用以下代码在 php 中做到这一点 dt1 2011 11 11 11 11 11 t1 strtotime dt1 dt2 date Y m d H 00 00 t2 strtotime dt2 tDiff t2 t1 hDiff

  • 禁用鼠标中键单击

    我需要您帮助解决一个问题 即如何禁用鼠标中键单击任何链接以在 IE 7 8 9 中打开新选项卡 我尝试过很多类似的事情 return false e cancelBubble true e returnValue false 但无法阻止 I

  • 当一个 @Controller 扩展另一个 @Controller 时，“发现不明确的映射”

    我有一个ImportAction类 用作多个特定于类型的导入控制器的父类 例如ImportClientsAction and ImportServicesAction ImportAction是一个带有注释的 Spring MVC Cont

  • 无法加载资源：服务器响应状态为 409

    自动 WordPress 更新后 插件表单 联系表单 7 现在在其下方显示斜杠 并且不再触发 wpcf7mailsent 侦听器事件 因此在提交表单后不再将其重定向到感谢页面 此错误 服务器响应状态为 409 或也称为 net ERR AB

  • 在加载包含超过 6000 个项目的列表时，ConstraintLayout 与 RecyclerVIew (ListAdapter) 似乎会使用大量内存（高达 1GB）

    我正在为我的应用程序构建一个简单的 FileExplorer 并使用协程获取给定路径中的文件 并在显示它们时 内存使用量出现峰值 我在帖子底部显示了探查器工具选项卡 我最好的猜测是 适配器正在为列表中的每个项目创建一个视图持有者 并且使用应

  • C 中的 Double For 循环语法

    我是 C 新手 必须编写一些模拟给定函数的代码 但是 我很难明确地理解这段代码中的第二个 for 循环正在做什么 该语法似乎不遵循以下循环语法的标准 for init condition increment statement s 这是我正

  • Pandas-通过对列和索引的值求和来合并两个数据帧

    我想按索引和列合并两个数据集 我想合并整个数据集 df1 pd DataFrame 1 0 0 0 2 0 0 0 3 columns 1 2 3 df1 1 2 3 0 1 0 0 1 0 2 0 2 0 0 3 df2 pd DataF

  • 希望在 SVG 元素上结合 CSS 填充颜色和 SVG 图案

    我想利用 CSS 的强大功能来结合两件事来设计 SVG 元素的样式 填充颜色和纹理 我的纹理是使用具有描边但没有填充的 SVG 图案创建的 但即使该图案没有填充 它仍然不允许通过笔划看到 CSS 填充颜色 http jsfiddle net

  • iOS 中的 Facebook 分享对话框

    我正在努力实施本机共享对话框来自 Facebook 的示例应用程序 这样做似乎有些问题 到目前为止我所做的事情 包含最新的 Facebook SDK 包括 AdSupport 社交 帐户 安全和 libsqlite3 dylib 添加了来自

  • jQuery Sortable - 事件被调用太多次

    我有一个 x 类列表 该列表中有许多 y 类列表 可以将项目从任何子列表拖动到任何其他子列表 也可以安排子列表本身的顺序 我正在努力应对通过可排序触发的事件 接收 仅当某些内容从其他地方带入列表时才会触发 因此对于在子列表中排列项目或排列子

  • 为什么我的绝对/固定位置元素没有位于我期望的位置？

    我刚刚学习CSS中的定位 根据我发现有用的文章 我开始尝试 使用以下代码 我无法理解为什么绝对灰盒 div 位于其相对父级之外 我预计灰盒将位于容器的左上角 container background lightblue position r

热门标签