css-position 相关问题

带有边框半径和粘性标题的 HTML 表格

我有一个 HTML ，带有边框半径和使用位置的粘性标题：sticky，如下所示： https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是，当使用 滚动时 我有一个带有 <table> 的 HTML border-radius 和使用 position: sticky 的粘性标题，如下所示： https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是，当使用粘性标题滚动时，表格行会伸出粘性标题的圆角所在的位置。请参阅此图片的左上角： 有没有办法可以在使用粘性标题向下滚动时保持圆角，或者在标题变得粘性并从原始位置向下移动时删除粘性标题？理想情况下，我想要一个CSS解决方案。 您可以使用伪元素隐藏边框的某些部分： table thead th:first-child::before, table thead th:last-child::after { width: 1px; height: 5px; background: white; content: ""; display: block; position: absolute; top: 0px; } table thead th:first-child::before { left: -1px; } table thead th:last-child::after { right: -1px; } 正如Ivan建议的那样，似乎使用伪元素来覆盖标题下方不需要的边框是（令人惊讶的）唯一可行的选择。我建议使用伪不仅用于覆盖“外部”区域，而且还用于绘制弧线和填充“内部”区域。可以使用堆叠背景来做到这一点。应用于原始代码： /* § Additions / Changes */ table thead th { position: relative; } /* Pseudos exceeding header boundary by border width; with rectangle covering half circle and rest of height */ table thead th:last-child::after, table thead th:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--global-border-width-1)); width: var(--global-border-radius); background-image: linear-gradient(to bottom, transparent var(--global-border-radius), var(--global-title-color) 0), radial-gradient(circle at var(--global-border-radius) var(--global-border-radius), var(--global-title-color) var(--global-border-radius), var(--global-content-background-color) 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); background-repeat: no-repeat; } table thead th:last-child::after { left: auto; right: calc(-1 * var(--global-border-width-1)); background-position: top right; } /* § Declarations and original style */ html { --global-content-background-color: white; --global-title-color: black; --global-background-color: lightblue; --global-border-color: black; --global-border-radius: 20px; --global-border-width-1: 10px; --global-space-fixed-2: 10px; --global-space-fixed-3: 15px; --global-border-diameter: calc(2 * var(--global-border-radius)); background-color: var(--global-content-background-color); } table { color: var(--global-title-color); background-color: var(--global-content-background-color); border-collapse: separate; border-color: var(--global-title-color); border-style: solid; border-radius: var(--global-border-radius); border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1); border-spacing: 0; width: 100%; } table thead { position: sticky; top: 0; z-index: 10; } table thead th { color: var(--global-background-color); background-color: var(--global-title-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: bottom; } table tbody td { border-top: var(--global-border-width-1) solid var(--global-border-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: top; } table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--global-border-radius); } table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--global-border-radius); } /* § Unrelated / demo */ * { scroll-margin-top: calc(var(--global-space-fixed-2) * 4 + 1rem); /* = height of sticky thead + top padding of cell, provided text in thead does not wrap */ scroll-margin-bottom: 1em; } td { height: 60vh; } td a { float: right } tr:last-child td { vertical-align: bottom; } a[name]:empty::before { content: attr(name); } th:not(#\0):hover::before { background-image: linear-gradient(to bottom, transparent var(--global-border-radius), #0F08 0), radial-gradient(circle at center, #00F8 var(--global-border-radius), #F2F4 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); } <table> <thead> <tr> <th>Fake non-transparent "border-radius"</th> </tr> </thead> <tbody> <tr> <td> <a href="#⬆️" name="⬇️"></a> For fixed header</td> </tr> <tr> <td> <a href="#⬇️" name="⬆️"></a> Using CSS stacked background images in pseudo elements</td> </tr> </tbody> </table> 只需从表格中删除边框，并为表格主体中的第一个和最后一个表格单元格添加左右边框： tbody td:first-child { border-left: 1px solid black; } tbody td:last-child { border-right: 1px solid black; } tbody tr:last-child td{ border-bottom: 1px solid black; } tbody tr:last-child td:first-child { border-bottom-left-radius: 2px; } tbody tr:last-child td:last-child { border-bottom-right-radius: 2px; } 当然是使用适当的缩进、嵌套和变量！ 使用许多伪选择器看起来样式相当丑陋，但似乎可以解决您的问题。 有一个更紧凑的解决方案。只需将具有背景颜色的框阴影添加到第一个 < th > 和最后一个 < th > 即可隐藏元素。 在此示例中，在右侧，您可以看到表格行由于边框半径而可见。在左边，我应用了盒子阴影。 盒子阴影：0 -2.1rem 0 .6rem #E5E7EB； 在这里，它是灰色的，以便您可以看到它的工作原理，但您只需使用与背景相同的颜色即可使其完全不可见。 这是最终结果以及我正在使用的代码： th:第一个孩子 { 边界半径：0.75rem 0 0 0； 左边框：.1rem 实心 $color-gray-200； 框阴影：0 -2.1rem 0 .6rem $color-gray-200； } th：最后一个孩子{ 边界半径：0 0.75rem 0 0； 右边框：.1rem 实心 $color-gray-200； 盒子阴影：1rem -2.1rem 0 .6rem $颜色白色； } 可能需要调整框阴影以隐藏基于所选边框半径的行。 不确定你是否熟悉jquery，如果熟悉的话你可以在滚动内容时动态更改 border-top-left-radius: 等于粘性标题的半径，但这对于新手来说有点棘手jquery/JS。 其次，您可以将粘性标题封闭到父级（例如class="parent")），并将父级背景设置为白色，没有边框。并保持粘性标题的边框半径不变。因此，当您滚动内容时将位于该父级下方（例如 class="parent"）。为了确保父级出现在该行上方，您可以给出 z-index: 10

CSS：拥有一个带有绝对定位图像的 div 填充其父级而不会溢出

对于一个新项目，我有一个构造，其中有一个 div（我们称之为父级），其中包含另一个 div（我们称之为子级），其中放置的图像绝对定位以适合 cer...

目标位置：当前处于“卡住”状态的粘性元素

位置：粘性现在适用于某些移动浏览器，因此您可以使菜单栏随页面滚动，但每当用户滚动经过它时，它就会粘在视口的顶部。 但如果你想...

为什么我的网站在电脑和移动设备上调整大小不同？

我一直在为一个学校项目开发一个网站，并为我的表格添加了更改大小的代码。当我编码时，我经常调整浏览器窗口的大小以检查移动设备上的大小。看起来很棒...

CSS悬停和位置：绝对不起作用

我知道这个问题已经被问过几次了，但是没有一个答案非常清楚，我已经编写了一些基本代码，如果有人可以解决代码并解释为什么会发生这个问题，那将会...

光标后元素的位置由容器内容偏移

我正在尝试创建一个拖放功能，它是模式中的子组件，其中当前拖动的项目跟随鼠标的位置，但是，鼠标的位置是

如何添加方形部分并整合它们

嗨，我不知道我的问题是否愚蠢，但我正在绕过 CSS 定位 Flexbox 和所有这些东西，但我真的想让我的网站更引人注目？这就是我的想法。输入图片

为什么最大宽度在 tailwind css 中不起作用？

我已将最大宽度设置为 max-w-screen-2xl 但导航栏忽略它并超出最大宽度值。我为其他部分设置了 max-w-screen-2xl，它们工作正常。如何...

CSS 翻译和 z 索引

我这里有问题 在html文件的正文中有这样的内容： translate() 问题 我想通过CSS来实现这个形状： HTML+CSS 这就是我的制作方法： div { ...

了解 CSS 位置属性

我创建了以下简单的 HTML 来帮助我理解位置属性，并且我对下面的 HTML 在浏览器（Chrome）中的显示方式有一个简单的问题： ...

尝试让两个按钮垂直高度相同且都靠近中心

我尝试创建两个按钮，它们垂直高度相同，但几乎居中，之间有一个小间隙。但我不希望按钮在创建窗口时四处移动......

如何在顶部带有文本和图像的 div 中间添加一条色带？

我正在使用 React JS 和 Tailwind CSS 为客户制作网络漫画。我正在设计一些小人物描述，这是他给我的草图 这就是我目前所拥有的，...

相对父代的绝对定位后代的意外行为

我有以下html代码： ... 我有以下html代码： <body> <ul class='navbar'> <li class='navItem'> <div class='dropBox'> <div class='dropTitle'> Careers </div> <div class='dropContent'> <!-- further menu items --> <!-- HR Roles , IT Roles --> </div> </div> </li> <li> <!-- more menu items --> <!-- Home --> </li> </ul> </body> 我正在尝试实现如下所示的视觉效果： 为了达到这个结果，我将类 <ul> 的 navbar 设置为 position: relative，并将类 <div> 的后代元素 dropContent 设置为 position: absolute。具有 <div> 类的 dropBox 可以在可见和隐藏之间切换。给出的结果是： 打开菜单之前： 打开菜单后： 在线阅读后，我认为一个 position: absolute 元素（在我的例子中是 dropContent 类）将被放置在文档流下面最近的 position: relative 祖先（在我的例子中是 navbar 类）。相反，该元素被放置在最近的 position: relative 祖先的顶部。 为了解决这个问题，我尝试将我的 margin-top 类的 dropContent 设置为 100%。事实证明，这已将 dropContent 类推到了视口的底部 - 因此 100% 是相对于视口而不是 position: relative 父级进行的。 我在网上阅读了许多讨论相对和绝对定位元素行为的帖子，并从我的代码中删除了额外的 CSS 来尝试隔离问题，但似乎仍然无法得到我想要的结果。 有人可以告诉我我对 position: relative 和 position: absolute 的理解差距在哪里吗？我怎样才能达到我想要的结果？ 我正在寻找 HTML 和 CSS 解决方案 - 而不是使用 Javascript 的解决方案。 Margin 总是将内容推送到其父级中。尝试下面的代码 .navbar{ background:#E4E4E4; } ul{ list-style:none; } .dropBox{ position:relative; } .dropContent{ position:absolute; left:0; background:grey; top:100%; } <body> <ul class='navbar'> <li class='navItem'> <div class='dropBox'> <div class='dropTitle'> Careers </div> <div class='dropContent'> <div>HR Roles</div> <div>IT Roles</div> </div> </div> </li> <li> <!-- more menu items --> <!-- Home --> </li> </ul> </body> 这就是你想要实现的目标吗？

CSS 位置：绝对位置：相对“顶部”不起作用

我正在开发一个使用position:relative div 的网站，其中包含position:absolute div。我理解我所相信的概念，一切都很好，除了我似乎无法获得顶级属性......

元素在转换时移离当前位置

我有一个单词要添加两个字母。这两个字母应该位于单词内的某个位置（不是在开头或结尾），并且也应该在悬停时淡入单词中。 这个词是

具有绝对定位子项的可滚动容器

我正在尝试使具有绝对位置的嵌套容器出现在剩余内容之上。 我这里有一个示例代码：https://codepen.io/usedtobemeonce/pen/poGxGbW 但示例代码是...

Z-index 在滚动时不会隐藏固定导航栏下的内容

我正在学习 CSS 和 HTML。在创建网站时，我必须创建一个固定的导航栏。但是，当我滚动时，滚动的内容显示在导航栏上。这是 HTML（请我...

使用位置：固定显示：可弯曲

我给我的导航栏设置了display: flex; 的属性。我还希望修复导航栏。为什么位置：固定；不起作用，但位置：粘性；是为同样的工作吗？ 一旦我添加了属性...

相对定位元素而不占用文档流中的空间

如何相对定位元素，并且不占用文档流中的空间？

强制将两个页脚置于页面底部

我现在正在开发的网站有一个有趣的布局，但我在 CSS 中很难正确使用它。页眉和页脚跨越浏览器窗口的整个宽度，内容受到限制......