CSS中的“position”属性允许您通过将其值设置为static（默认设置），relative，absolute，fixed或sticky来控制页面上元素的位置。
在 CSS 中，如何使具有“position:absolute”的元素左对齐但又包含在右？
目标是使绝对位置元素左对齐（默认实现），但随后也取代对齐方式，使其不超出 .row 的右侧。 总结：我正在尝试实现缩放
我想要一个带有叠加效果的背景图像。 请参阅：https://jsbin.com/giqadife/edit?html,css,output 叠加效果应始终为全屏尺寸 - 调整大小时也是如此。我先...
我一直在向 Chat GPT 询问此事，它告诉我内容 div 应该放置在标题 div 下方，这就是我想要的。 . header { 位置：固定； } ... 我一直在向 Chat GPT 询问此事，它告诉我内容 div 应该放置在标题 div 下方，这就是我想要的。 .header { position: fixed; } <div class="header">Header</div> <div class="content">Content</div> 但在本地和一些在线 HTML 编辑器中，内容 div 都放置在标题 div 的顶部。 聊天 GPT 是愚蠢的，还是我愚蠢（可能）？ 它就在你的标题后面。查看更改。 .header { background: black; color: white; } .content { margin-top: 30px; background: yellow; color: black; } <div class="header"> <div>Header</div> </div> <div class="content">Content</div>
我正在处理一个大型项目，其中一部分是打印 HTML 页面。 但是，我们正在处理页面不适合 Letter 尺寸纸张的问题。 请看下面的简单代码...
我将使我的导航栏粘性定位于 ul 标签，但没有任何变化。立场：粘性属性在我的网站上不起作用。 标头 ul { 显示：柔性； 调整内容：居中；
我正在尝试获取一个具有位置的div：在我的页面上对齐固定中心。 我总是能够使用这个“hack”来使用绝对定位的 div 来做到这一点 左：50%； 宽度：400px； 边距-
如何确保固定模态框位于顶部并且当用户滚动时模态框的顶部也可见？
这是我的代码。您能帮我创建一个更容易理解的版本吗？ 从'@/layouts/layout.props'导入{LoginProps}； 进口 { 盒子， 按钮， 分频器， 柔性， 表单控制...
所以我正在用 html 和 css 做我的第一个项目，其中一个任务是并排（水平）对齐 4 个图标，并在我将鼠标移过它时使它们“增长”一点。亲...
所以我在我的网站上使用了 100 vh 高的英雄图像。现在图像是绝对定位的，因此我可以相对于图像定位图像上的其他元素，例如徽标、导航和文本。之后...
我有一个API可以获取狗的图像，我想在它上面应用心形图标（比如最喜欢的功能）。单击后，该图像也应该显示在收藏夹部分。我不是...
我正在尝试设置框，以便我可以相应地添加其他元素。然而，这些框的位置会根据我使用的显示器或我是否在浏览器上进入全屏模式而不断变化。 我
我如何相对于 h1 进行定位？所以我有一个盒子，我设置了属性，id就像它的位置相对于它的父项，假设设置为文本对齐中心，那么可以说是h1。 那我想要...
我正在开发一个Web应用程序，我试图将Flexbox内的div标签居中，我不明白为什么Flexbox不分为三个偶数部分。 我的代码 导航栏组件 导入...
我遇到了 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>