CSS中的“position”属性允许您通过将其值设置为static（默认设置），relative，absolute，fixed或sticky来控制页面上元素的位置。
我找到了几篇文章： 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 是
如何在不使用表格、Flexbox 或网格系统的情况下制作网格
正如您在标题中看到的那样，我想在不使用表格、Flexbox 或网格系统的情况下制作网格。但是可以使用浮动。 它应该看起来像这样（不关心确切的颜色）： 我找了一个...
在此处输入图片描述我目前正在尝试将其插入另一个框的右上角，但我无法将其放在右上角，而是框只是与文字重叠。 ＃盒子 {
这是我第一次制作下拉菜单，我终其一生都无法让它无缝地适应其可见的菜单按钮。我可以使右侧与主菜单按钮齐平，但是...
我想知道为什么我在`article`中作为伪元素放置的`background-image:linear-gradient`的位置是这样的
背景图像：线性渐变 https://besthorrorscene.com/ << I was clone coding this site and the gradient underneath each was beautiful and I tried to copy it, but what I don't underst...
很简单的代码，但是我还没有找到明确的答案 据我了解，所有绝对定位的 HTML 元素都根据最近的非静态/定位元素获得它们的位置......
我正在练习html和css，刚开始，我已经卡住了。 我有一个粘性的边，它似乎占用了所有可能的宽度并阻止了其他元素的正确定位。我有