CSS中的“position”属性允许您通过将其值设置为static（默认设置），relative，absolute，fixed或sticky来控制页面上元素的位置。
我遇到了 CSS 布局的问题，当父级的水平滚动增加时，父级 div (#container) 中的子级 div (#normal) 不会按预期增长。问题似乎...
我遇到了 CSS 布局的问题，当父级的水平滚动增加时，父级 div (#container) 中的子级 div (#normal) 不会按预期增长。问题似乎...
我希望将对象放置在一些需要覆盖的图像下方。为了使图像重叠，我将它们绝对定位。但是当我这样做时，所有需要的内容都在下面......
我有以下标记： 你好... 我有以下标记： <div id="playArea" style="position: relative;"> <div style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div> <div style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div> <div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div> </div> 但是我想在“playArea”div 下有一段文本，但因为 playArea 内的所有 div 都是绝对的，所以文本不会出现在最后一个绝对定位的 div 的底部。 我对此进行了研究，并找到了使用 float:left 和 clear:left 的替代方法，但是在第一个 div 上使用此方法后，您无法正确定位 div，因为第二个 div 的起点位于第一个 div 下方，而不是在 (0,0)。关于如何解决这个问题的任何想法。 谢谢 如果我理解正确的话，你只需给“playArea”div正确的高度即可。 编辑：我的意思是，其中所有内容的总高度。 但是我想在“playArea”div下有一段文本，但是因为playArea中的所有div都是绝对的，所以文本不会出现在最后一个绝对定位的div的底部。 你似乎已经知道了所有的尺寸和位置，只需添加另一个绝对定位的 div 并将相对内容放入其中即可。 我对此进行了研究，并找到了使用 float:left 和 clear:left 的替代方法，但是在第一个 div 上使用此方法后，您无法正确定位 div，因为第二个 div 的起点位于第一个 div 下方，并且不在 (0,0) 处。关于如何解决这个问题的任何想法。 您需要删除 position: absolute 才能使浮动正确。只要宽度和高度就足够了。 向左浮动三个内部 div，将 overflow: hidden; 放在 playArea div 上，然后将 <p> 放在三个内部 div 下，并使用 clear: both; 在阅读了您和“BalusC”之间的评论后，您似乎已经修改了 CSS，现在正在尝试浮动您的项目，并使用 margin-top 和 margin-left 进行定位。您完全可以这样做，但是您忘记了您也可以使用负边距来定位元素。例如，如果您使用 margin-top:-10px; 那么它会将元素向上拉（而不是像正常的正值边距一样将其向下推）。所有其他边距也是如此。 这似乎是你现在所缺少的成分。
我正在寻找纯CSS中有点奇怪的东西（如果可能的话）...... 我有一个没有高度但有最大高度的模态，我有一个应该有一定高度的内容，但它应该......
做...</desc> <question vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .wrap { overflow-x: auto; } .content { position: relative; width: 100%; min-width: 800px; height: 200px; background-color: green; } .absolute { position: absolute; top: 50%; right: 0; background-color: red; height: 200px; width: 100px; } </style> </head> <body> <div class="wrap"> <div class="content"> <div class="absolute"></div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> <p>我有一个像上面这样的页面。</p> <p>出于某种原因，我为 <pre><code>.content</code></pre> 设置了最小宽度，所以我为 <pre><code>set overflow-x: auto;</code></pre> 设置了 <pre><code>.wrap</code></pre>。</p> <p>在<pre><code>.content</code></pre>中，我有一个<pre><code>absolute element</code></pre>。</p> <p>结果：</p> <p><a href="https://i.stack.imgur.com/Gq3Se.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL0dxM1NlLnBuZw==" alt=""/></a></p> <p>如您所见，出现了一个<pre><code>scroll bar</code></pre>。</p> <p>如果我删除<pre><code>overflow-x: auto;</code></pre>中的<pre><code>.wrap</code></pre>：</p> <p><a href="https://i.stack.imgur.com/7m9vR.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tLzdtOXZSLnBuZw==" alt=""/></a></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .wrap { } .content { position: relative; width: 100%; min-width: 800px; height: 200px; background-color: green; } .absolute { position: absolute; top: 50%; right: 0; background-color: red; height: 200px; width: 100px; } </style> </head> <body> <div class="wrap"> <div class="content"> <div class="absolute"></div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> 当孩子有 <p><code>overflow-x: auto;</code><pre> 时，</pre><pre><code>absolute element</code></pre> 会导致滚动。但当浏览器屏幕很小时，我需要 <pre><code>overflow-x: auto;</code></pre> 来滚动内容。</p> <p>我该如何解决这个问题？</p> </question> <answer tick="false" vote="0"> <p>出现垂直滚动条是因为，根据 <a href="https://www.w3.org/TR/css-overflow-3/#ref-for-valdef-overflow-visible%E2%91%A0" rel="nofollow noreferrer">Overflow CSS 规范</a>：</p> <blockquote> <p>如果 <pre><code>visible</code></pre> 或 <pre><code>clip</code></pre> 之一既不是 <pre><code>overflow</code></pre> 也不是 <pre><code>auto</code></pre>，则 <pre><code>hidden</code></pre> 的 <pre><code>overflow-x</code></pre>/<pre><code>overflow-y</code></pre> 值分别计算为 <pre><code>visible</code></pre>/<pre><code>clip</code></pre>。</p> </blockquote> <p>由于 <pre><code>overflow-x</code></pre> 设置为 <pre><code>auto</code></pre> 并且我们的默认初始 <pre><code>overflow-y</code></pre> 值为 <pre><code>visible</code></pre>，因此 <pre><code>visible</code></pre> 值计算为 <pre><code>auto</code></pre>，从而形成垂直滚动条。</p> <p>因此，要删除垂直滚动条，我们可以将 <pre><code>overflow-y</code></pre> 值设置为 <pre><code>hidden</code></pre>：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>.wrap { overflow-x: auto; overflow-y: hidden; } .content { position: relative; width: 100%; min-width: 800px; height: 200px; background-color: green; } .absolute { position: absolute; top: 50%; right: 0; background-color: red; height: 200px; width: 100px; }</code></pre> <pre><code><div class="wrap"> <div class="content"> <div class="absolute"></div> </div> </div></code></pre> </div> </div> <p></p> </answer> </body></html>
我找到了几篇文章： https://melanie-richards.com/blog/css-grid-sticky/ https://ishadeed.com/article/position-sticky-css-grid/ 这解决了尝试使用位置时的“问题”：
我按照一些教程创建了一个基于 CSS 的浮动滚动到顶部按钮。然而，我注意到最后一个 HTML 元素下面有额外的空白（例如最后一行）额外空白的高度 m...
我制作了一个 JSFiddle 来解释我想用光滑的幻灯片做什么： 布拉布拉 我做了一个 JSFiddle 解释我想用光滑的幻灯片做什么： <div class="slider"> <div> <div class="absolute"> Blabla </div> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" /> </div> <div> <img src="http://kenwheeler.github.io/slick/img/fonz2.png" /> </div> </div> CSS .absolute { width: 100px; height: 100px; position: absolute; top: -50px; background-color: #900; } 简而言之：第一张幻灯片中的红色框是不可见的，因为它位于隐藏了溢出的幻灯片内部。我需要该框仅成为第一张幻灯片的一部分并随幻灯片移动。 任何人都可以修复 JSFiddle 示例，使其有效，我们将不胜感激。 我发现了一个技巧，你必须在每个幻灯片元素上设置一个 margin-top 或 padding-top 。 .slick-slide{ padding-top:25px //margin-top:25px also working } 工作正常。确保红色框应该是绝对位置并且每个滑块都有相对位置。这样你的红色框就只属于那张幻灯片 .slider > div{ position: relative; } .absolute { width: 100px; height: 100px; position: absolute; top: -50px; background-color: #900; } 第一张幻灯片中的红色框将始终保持单独状态，因为它的位置为“绝对”。 但你可以解决这个问题。 absolute：该元素从正常文档流中删除，并且在页面布局中不会为该元素创建空间。该元素的位置相对于其最近定位的祖先 这就是我们添加到父 div 的原因： position:relative 现在代码将如下所示： <div class="slider"> <div style="position: relative"> <div class="absolute"> Blabla </div> <img ...> </div> <div> <img ...> </div> </div> 如果你愿意，你可以尝试一下父母的位置，看看这是如何运作的...... <div style="position: relative; left: 1">
假设您收到以下 HTML： 假设您获得以下 HTML： <div class="grid"> <div class="sticky blue one" style="height: 50px !important"></div> <div class="red two"></div> <div class="green three"></div> <div class="orange four" style="height: 1500px !important;"></div> </div> ，其中网格提供两列；第一个元素生成两行，最后一个元素生成两列，如下所示： 如何在不更改 HTML 的情况下使蓝色元素具有粘性 (position: sticky)，但只能粘到橙色元素？ 网上有一些资源建议使用align-self，但我还没有找到可行的解决方案。 这是当前状态，蓝色元素滚动到橙色元素上： .grid { display: grid; width: 100%; gap: 1rem; background-color: aliceblue; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "one two" "one three" "four four"; } .grid>div { height: 500px; width: 100%; } .sticky { position: sticky; top: 5px; } /** * Placement */ .one { grid-area: one; } .two { grid-area: two; } .three { grid-area: three; } .four { grid-area: four; } /** * Colours */ .blue { background-color: blue; } .red { background-color: red; } .orange { background-color: orange; } .green { background-color: green; } <div class="grid"> <div class="sticky blue one" style="height: 50px !important"></div> <div class="red two"></div> <div class="green three"></div> <div class="orange four" style="height: 1500px !important;"></div> </div> 这里有一个 codepen 的链接：https://codepen.io/BernhardWebstudio/pen/mdQZMwW 您考虑过使用 z-index 吗？ .one { grid-area: one; z-index: 1; // Add this } .four { grid-area: four; z-index: 50; // And add this } 这样蓝色网格就会隐藏在橙色元素下面。这不是一个非常漂亮的解决方案，但在不更改 html 的情况下无法真正思考任何事情......
这是我必须设计的，我在下面提供我的代码， HTML：
我有一个绝对定位的父元素和三个子元素。 当我使第一个孩子绝对定位时，第二个孩子向上移动到第一个孩子的后面。这是预料之中的。
使用“z-index: 1”将“margin”属性设置为“fixed”元素
有一个列表和一个评论字段。评论字段固定在页面底部。当列表很长时，应用页面滚动。我希望列表的底部始终与...
如何使 Flexbox 项目与其他项目具有相同宽度，但在新行上
我想将 Flexbox 项目设置为与两个 Flexbox 项目组合的宽度相同的宽度。例如： 。身体 { 显示：柔性； 弹性包裹：包裹； 调整内容：居中； 对齐项目：flex-s...
如何使 Flexbox 项目与其他项目具有相同宽度，但在新行上
我想将 Flexbox 项目设置为与两个 Flexbox 项目组合的宽度相同的宽度。例如： 。身体 { 显示：柔性； 弹性包裹：包裹； 调整内容：居中； 对齐项目：flex-s...
为什么顶部偏移（以 % 形式给出）不会垂直移动相对定位的元素？
假设有一个相对定位的div 元素。当我将最高值设置为 % 时，它根本不执行任何操作。但是一旦我用px表达它，它就起作用了。有什么特别的理由/逻辑吗？ 这...
我试图在屏幕的特定部分对齐大量照片（10-20），但当我更改浏览器的大小时，我似乎无法让它们保持在我想要的位置。今...
我有一个设置为overflow-y:scroll的容器，其中有很多元素。其中之一是下拉菜单，我希望它能够溢出容器。它已经设置为
我正在尝试在反应中复制以下设计： 这是我目前所拥有的： 这是它的代码： 从“react”导入 React, { useState }; 导入“./DisplayCards.css&...
我只是在学习CSS中的定位。根据我发现有用的文章，我开始尝试。 使用以下代码，我无法理解为什么绝对灰盒 div 是