在CSS中，`absolute`属性将导致元素相对于其第一个非静态父元素定位。
我有一个 div，我希望将其放置在网页底部。我可以使用position:absolute来实现这一点。但是，当窗口变小时，我不希望它与上面的 div 重叠。这...
我有一个位置为绝对的div，我希望它足够高，以便当我一直向下滚动时它到达页面底部。换句话说，它应该延伸文档的整个高度...
<div style="overflow-x:scroll;"> <div style="position: relative; width:3000px; height:100px; background:green; "> <div style="position: absolute; width:200px; height:200px; background:red; top:10px; left:10px "></div> </div> </div> 结果： 我需要如下图所示进行操作（应保留水平滚动，红色块位于所有内容之上，红色块将与绿色块一起水平滚动）： 有没有不用 JavaScript 就能做到这一点的方法？ 可以使用position:fixed并使用javascript通过onscroll事件设置红色块的坐标来完成，但这并不漂亮 不太明白问题所在。 根据我的理解，你想让红色框与绿色框一起水平滚动。 您可以利用position:sticky属性和left:0来保持红色块水平固定，同时允许它垂直滚动。以下是修改 HTML 和 CSS 的方法： <div style="overflow-x: scroll;"> <div style="position: relative; width:3000px; height:100px; background:green; "> <div style="position: sticky; width:200px; height:200px; background:red; top:10px; left:0;"></div> </div> </div> 此设置将使红色块保持水平固定，同时允许绿色和红色块一起水平滚动。
TYPO3 v10 - 绝对链接 - config.absRefPrefix 已死？
如何告诉TYPO3 v10（全局）在前端生成绝对链接？ config.absRefPrefix 似乎不再起作用。此外，在站点配置中使用绝对 url 作为基础没有任何
Chrome 和 Safari 中的 CSS 列数和绝对位置（z-index？）
考虑以下示例：https://codepen.io/anon/pen/OOrMLm 可以单击每个白色块，这会显示一个小的红色弹出窗口，我需要用户在其中做出一些选择。 在火狐浏览器上，
如果我将子 div 的位置设置为绝对，然后要相对于父级定位它，我必须将父级的位置设置为相对，对吧？如果我设置位置也可以吗...
我知道这个问题已经被问过几次了，但是没有一个答案非常清楚，我已经编写了一些基本代码，如果有人可以解决代码并解释为什么会发生这个问题，那将会...
这是我遇到过的最奇怪的错误之一。有可能它是一个扩展程序或浏览器错误或其他东西，但它仅在我在开发中刷新它时才显示在我正在构建的应用程序上......
我是CSS新手。我想知道为什么当我将 div 元素的位置更改为绝对位置时，div 元素的宽度会发生变化？在 Chrome v25.0.1364.172m 和 IE9 中尝试过，都有...
我正在尝试实现这样的布局：我可以将文本保留在容器内 - 并与其他部分响应地保持一致。但是我希望图像溢出容器并且始终...
我有相当于这个简化示例的第二种情况（div组）的东西，第一个只是为了表明它在绝对上下文之外工作，子级扩展...
我有一个div（绝对容器），它绝对定位到静态定位的父级。我的目标是使绝对容器具有设置浏览器的高度，最大高度约为 600px。这是cu...
假设我有一个元素，它在视觉上是容器的一部分。该容器的高度可能非常长。 现在，当用户向下滚动时，我想将此元素放置在
我对 CSS 绝对位置有一些问题，其中元素位于滚动条上方...... 这是我的代码： document.addEventListener("DOMContentLoaded", () => { const h1 = 溢出。
我有以下 HTML 片段： .父级{ 高度：100vh； 位置：相对； 背景：中海绿； } 。孩子 { 位置：绝对； 底部：0； 左：0； 宽度：100%； 回来...
在 CSS 中，如何使具有“position:absolute”的元素左对齐但又包含在右？
目标是使绝对位置元素左对齐（默认实现），但随后也取代对齐方式，使其不超出 .row 的右侧。 总结：我正在尝试实现缩放
我想要一个带有项目的侧边栏，当悬停时，它会显示子项目。 我遇到了溢出和绝对位置的问题，请帮助我。谢谢！ 这个视频的详细内容： https://youtu.be/4D3hNu2JBvU 哈...
我有一些容器，它们的子容器只是绝对/相对定位的。如何设置容器的高度以便他们的孩子在里面？ 这是代码： 超文本标记语言 我有一些容器，它们的子容器只是绝对/相对定位的。如何设置容器的高度以便他们的孩子在里面？ 这是代码： HTML <section id="foo"> <header>Foo</header> <article> <div class="one"></div> <div class="two"></div> </article> </section> <div style="clear:both">Clear won't do.</div> <!-- I want to have a gap between sections here --> <section id="bar"> <header>bar</header> <article> <div class="one"></div> <div></div> <div class="two"></div> </article> </section> CSS article { position: relative; } .one { position: absolute; top: 10px; left: 10px; background: red; width: 30px; height: 30px; } .two { position: absolute; top: 10px; right: 10px; background: blue; width: 30px; height: 30px; } 这是一个jsfiddle。我希望“bar”文本出现在 4 个方块之间，而不是它们后面。 http://jsfiddle.net/Ht9Qy/ 有什么简单的解决方法吗？ 注意，我不知道这些孩子的高度，也无法为容器设置 height: xxx。 2022 年更新。这个答案已经有近10年历史了。当它写成的时候，我们还没有像 Flex 或 Grid 这样的布局技术（那是黑暗、黑客/有趣的时代）。 值得庆幸的是，情况已经有了很大改善。 Jöcker 的回答 向您展示了如何使用 Grid 实现这种布局。如果您可以忍受不支持旧版浏览器，那就这样做吧！ 原答案 如果我正确地理解了你想要做的事情，那么我认为在保持孩子们绝对定位的同时使用CSS这是不可能的。 绝对定位的元素完全从文档流中删除，因此它们的尺寸不能改变其父元素的尺寸。 如果您真的必须在保持子级为position: absolute的同时实现这种效果，您可以使用JavaScript来实现这一点，方法是在渲染后找到绝对定位的子级的高度，并使用它来设置父级的高度. 或者，只需使用 float: left/float:right 和边距即可获得相同的定位效果，同时将子级保持在文档流中，然后您可以在父级上使用 overflow: hidden（或任何其他clearfix 技术）来调整其高度扩展到其子级。 article { position: relative; overflow: hidden; } .one { position: relative; float: left; margin-top: 10px; margin-left: 10px; background: red; width: 30px; height: 30px; } .two { position: relative; float: right; margin-top: 10px; margin-right: 10px; background: blue; width: 30px; height: 30px; } 这是我的解决方法， 在您的示例中，您可以添加第三个元素 .one 和 .two 元素具有“相同样式”，但没有绝对位置且具有隐藏可见性： HTML <article> <div class="one"></div> <div class="two"></div> <div class="three"></div> </article> CSS .three{ height: 30px; z-index: -1; visibility: hidden; width:0!important; /* if you got unnecessary horizontal scroll*/ } 您可以使用网格来做到这一点： article { display: grid; } .one { grid-area: 1 / 1 / 2 / 2; } .two { grid-area: 1 / 1 / 2 / 2; } 这是一个较晚的答案，但通过查看源代码，我注意到当视频全屏时，“mejs-container-fullscreen”类被添加到“mejs-container”元素中。因此可以根据此类更改样式。 .mejs-container.mejs-container-fullscreen { // This rule applies only to the container when in fullscreen padding-top: 57%; } 此外，如果您希望使用 CSS 使 MediaElement 视频流畅，下面是 Chris Coyier 的一个很棒的技巧：http://css-tricks.com/rundown-of-handling-flexible-media/ 只需将其添加到您的 CSS 中即可： .mejs-container { width: 100% !important; height: auto !important; padding-top: 57%; } .mejs-overlay, .mejs-poster { width: 100% !important; height: 100% !important; } .mejs-mediaelement video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } 希望有帮助。 现在可以使用 Flexbox 来解决这种布局问题，避免需要知道高度或使用绝对定位或浮动来控制布局。 OP 的主要问题是如何让父级包含未知高度的子级，他们希望在特定布局内做到这一点。将父容器的高度设置为“fit-content”即可实现此目的；使用“display：flex”和“justify-content：space- Between”产生我认为OP试图创建的部分/列布局。 <section id="foo"> <header>Foo</header> <article> <div class="main one"></div> <div class="main two"></div> </article> </section> <div style="clear:both">Clear won't do.</div> <section id="bar"> <header>bar</header> <article> <div class="main one"></div><div></div> <div class="main two"></div> </article> </section> * { text-align: center; } article { height: fit-content ; display: flex; justify-content: space-between; background: whitesmoke; } article div { background: yellow; margin:20px; width: 30px; height: 30px; } .one { background: red; } .two { background: blue; } 我修改了OP的小提琴： http://jsfiddle.net/taL4s9fj/ flexbox 上的 css 技巧： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ article { position: relative; } //clear the float article::after{ content: ''; clear: both; } .one { position: relative; float:left margin-top: 10px; margin-left: 10px; background: red; width: 30px; height: 30px; } .two { position: relative; float: right; margin-top: 10px; margin-right: 10px; background: blue; width: 30px; height: 30px; } 设置元素的样式为position:absolute 顶部：0，底部：0 这是另一个迟来的答案，但我找到了一种相当简单的方法，将“条形”文本放置在四个方块之间。这是我所做的更改； 在栏部分，我将“栏”文本包裹在中心和 div 标签内。 <header><center><div class="bar">bar</div></center></header> 在 CSS 部分中，我创建了一个“bar”类，用于上面的 div 标签中。添加此后，条形文本位于四个彩色块之间的中心。 .bar{ position: relative; }
我希望将对象放置在一些需要覆盖的图像下方。为了使图像重叠，我将它们绝对定位。但是当我这样做时，所有需要的内容都在下面......