CSS中的“position”属性允许您通过将其值设置为static（默认设置），relative，absolute，fixed或sticky来控制页面上元素的位置。
考虑这个 HTML： 这是一些文字 <... 考虑这个 HTML： <body style="max-width: 50px; border: 1px solid black; margin: 0 auto;"> <p>This is some text</p> <div style="width: 100px; background: yellow"> <p>Some wider content</p> </div> <p>Some more narrow text</p> </body> 我想将黄色框居中，使其溢出body。我在 StackOverflow 上查看了很多关于如何执行此操作的答案，然后通常涉及将 div 设置为相对定位并将其包装在另一个 div 中，但随后您始终需要显式设置包装器 div 的高度。 有没有办法让div水平居中而不影响垂直布局的工作方式？ 另请注意，我确实想将其居中；不仅仅是抵消固定金额。 在该 div 上使用以下设置： position: relative; left: 50%; transform: translateX(-50%); 这会将 div 向右移动父级宽度的 50%，然后向左移动其自身宽度的 50%，从而使其水平居中。 position: relative; 是使这些设置发挥作用所必需的。 请注意，使用 position: relative; 仍然保留 div 在文档流中占据的（水平）空间，而使用 position: absolute 时则不会出现这种情况。 body { max-width: 50px; border: 1px solid black; margin: 0 auto; } div { position: relative; left: 50%; transform: translateX(-50%); width: 100px; background: yellow; } <body> <p>This is some text</p> <div> <p>Some wider content</p> </div> <p>Some more narrow text</p> </body> 你可以使用弹性盒。请注意，这将改变边距与子项交互的方式。 body { display: flex; flex-direction: column; align-items: center; } <body style="max-width: 50px; border: 1px solid black; margin: 0 auto;"> <p>This is some text</p> <div style="width: 100px; background: yellow"> <p>Some wider content</p> </div> <p>Some more narrow text</p> </body>
考虑这个 HTML： 这是一些文字 <... 考虑这个 HTML： <body style="max-width: 50px; border: 1px solid black; margin: 0 auto;"> <p>This is some text</p> <div style="width: 100px; background: yellow"> <p>Some wider content</p> </div> <p>Some more narrow text</p> </body> 我想将黄色框居中，使其溢出body。我在 StackOverflow 上查看了很多关于如何执行此操作的答案，然后通常涉及将 div 设置为相对定位并将其包装在另一个 div 中，但随后您始终需要显式设置包装器 div 的高度。 有没有办法让div水平居中而不影响垂直布局的工作方式？ 另请注意，我确实想将其居中；不仅仅是抵消固定金额。 在该 div 上使用以下设置： position: relative; left: 50%; transform: translateX(-50%); 这会将 div 向右移动父级宽度的 50%，然后向左移动其自身宽度的 50%，从而使其水平居中。 position: relative; 是使这些设置发挥作用所必需的。 请注意，使用 position: relative; 仍然保留 div 在文档流中占据的（水平）空间，而使用 position: absolute 时则不会出现这种情况。 body { max-width: 50px; border: 1px solid black; margin: 0 auto; } div { position: relative; left: 50%; transform: translateX(-50%); width: 100px; background: yellow; } <body> <p>This is some text</p> <div> <p>Some wider content</p> </div> <p>Some more narrow text</p> </body> 你可以使用弹性盒。请注意，这将改变边距与子项交互的方式。 body { display: flex; flex-direction: column; align-items: center; } <body style="max-width: 50px; border: 1px solid black; margin: 0 auto;"> <p>This is some text</p> <div style="width: 100px; background: yellow"> <p>Some wider content</p> </div> <p>Some more narrow text</p> </body>
我正在尝试创建一个表。我希望它的第一列得到修复。我已经使用以下方法完成了 tr > th：第一个孩子， tr > td:第一个孩子 { 位置：粘性； 左：0； } ...
`box-shadow` 无法在 Chrome 中与 `border-collapse` 和 `position:relative` 结合使用
我有一个带有数据的。由于风格原因，它有边框折叠。 在该表中， 元素具有position:relative，因为我希望它们有一个工具提示（我实现了 vi... 我有一个带有数据的<table>。由于风格原因，它有border-collapse。 在该表中，<td>元素具有position: relative，因为我希望它们有一个工具提示（我通过子<div>和position: absolute实现）。 在 Chrome 中，除非我删除 box-shadow 或 <td>（我不想删除，因为出于上述原因我需要它们），否则 border-collapse 的 position: relative 不起作用。我该如何解决这个问题？它在 Firefox 中运行良好。 这是一个小例子： table { border-collapse: collapse; } td { position: relative; box-shadow: 0 0 10px black; } <table> <tr> <td>This has a shadow in Firefox but not in Chrome</td> </tr> </table> 对于质疑 position: relative 的人，这里有一个更长的示例，其中删除 position: relative 会破坏工具提示所需的功能： table { border-collapse: collapse; } td { position: relative; box-shadow: 0 0 10px black; border: 1px solid black; } div { visibility: hidden; position: absolute; background-color: #ff5555; z-index: 1000; right: 0; /* -1px looks inconsistent across columns :( */ top: 100%; /* pixel-perfect */ padding: 5px; border: 1px solid black; } td:hover>div { visibility: visible; } <table> <tr> <td>Hover your mouse cursor here <div>tooltip</div> </td> </tr> <tr> <td>Shadow is missing in Chrome</td> </tr> </table> 这是 Chrome 中 border-collapse、position: relative 和 box-shadow 组合的已知问题。 原始解决方案 表格行上的框阴影未出现在某些浏览器上 以下是修改 CSS 的方法： table { border-collapse: collapse; } td { position: relative; box-shadow: 0 0 10px black; transform: scale(1); } div { visibility: hidden; position: absolute; background-color: #ff5555; z-index: 1000; right: 0; top: 100%; padding: 5px; border: 1px solid black; } td:hover>div { visibility: visible; }
如果我将子 div 的位置设置为绝对，然后要相对于父级定位它，我必须将父级的位置设置为相对，对吧？如果我设置位置也可以吗...
第一次来这里。 我正在参加 Angela Yu 的 Web 开发训练营，并做一个项目来测试我对级联（特异性和继承）、CSS 选择器及其组合的了解，...
我有一个 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 定位 Flexbox 和所有这些东西，但我真的想让我的网站更引人注目？这就是我的想法。输入图片
我已将最大宽度设置为 max-w-screen-2xl 但导航栏忽略它并超出最大宽度值。我为其他部分设置了 max-w-screen-2xl，它们工作正常。如何...
我这里有问题 在html文件的正文中有这样的内容： translate() 问题 我想通过CSS来实现这个形状： HTML+CSS 这就是我的制作方法： div { ...
我创建了以下简单的 HTML 来帮助我理解位置属性，并且我对下面的 HTML 在浏览器（Chrome）中的显示方式有一个简单的问题： ...
我尝试创建两个按钮，它们垂直高度相同，但几乎居中，之间有一个小间隙。但我不希望按钮在创建窗口时四处移动......
我正在使用 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> 这就是你想要实现的目标吗？
我正在开发一个使用position:relative div 的网站，其中包含position:absolute div。我理解我所相信的概念，一切都很好，除了我似乎无法获得顶级属性......