CSS中的“position”属性允许您通过将其值设置为static（默认设置），relative，absolute，fixed或sticky来控制页面上元素的位置。
我正在尝试设置框，以便我可以相应地添加其他元素。然而，这些框的位置会根据我使用的显示器或我是否在浏览器上进入全屏模式而不断变化。 我
我如何相对于 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>
我找到了几篇文章： 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表达它，它就起作用了。有什么特别的理由/逻辑吗？ 这...