position 相关问题

看看下面的代码片段。标头看看下面的代码片段。 <div class="container"> <div class="header" style="position:sticky;top:0"> Header </div> <div class="content" style="position:static"> Page content ... </div> </div> 向下滚动页面时，内容位于标题下方。一切都按预期进行。但是，如果我将“内容”div 定位更改为相对，则内容在滚动页面时开始越过粘性标题。为什么会出现这种情况？有没有不使用 z-index 的解决方案？根据堆叠顺序，当 div.relative 的堆叠顺序高于 div.sticky 时会出现此问题（在 html 中，div.sticky 出现在 div.relative 之前）。没有 z-index 就没有解决方案。您可以访问https://www.udemynote.com/notion/16d15d47-52e7-8095-9d40-dcdeea64c0af查看详情

css position css-position sticky

回答 1 投票 0

为什么固定定位会改变元素的宽度？

我有一个，其宽度设置为 100%。当我添加position:fixed时，宽度会变大16px。我注意到在主体上，所有边都有 8px 边距，所以我猜测...... 我有一个 <div>，其宽度设置为 100%。当我添加position:fixed时，宽度会变大16px。我注意到在 body 上，所有边都有 8px 边距，所以我猜测 position:fixed 在某种程度上忽略了包含它的 body 标签的边距。我查看了 MDN 参考资料，但找不到任何可以解释正在发生的事情的内容。导致此行为的 position:fixed <div>发生了什么变化？示例：http://jsfiddle.net/UpeXV/ body 自动具有 8px 的边距。因此，当您将元素的 width 设置为 100% 时，它就变成了主体的宽度，减去两侧的 8px。但是当你给元素position:fixed时，它不再是相对于主体设置的，而是相对于没有边距的视口设置的。所以 width 现在是视口的宽度，即 2 * 8px 宽 - 您观察到的 16px。这是有关该主题的 W3 文档：具有position:absolute的元素的位置和尺寸是相对于其包含块的，而具有position:fixed的元素的位置和尺寸始终相对于初始包含块。这通常是视口：浏览器窗口或纸张的页面框。如果需要固定元素为100%宽度，并且还想要空间，可以考虑使用box-sizing: border-box。然后使用内边距（而不是边距）来创建空间。这将允许固定元素跨越页面的宽度而不会超出。边距、边框和填充始终添加到元素的尺寸中，除非您使用 border-box 模型，在这种情况下，宽度将包括填充和边框。参见：http://css-tricks.com/box-sizing/ 看起来当您将元素设置为 position:fixed 时，它会采用视口的宽度而不是其父元素的宽度。固定定位与绝对定位类似，不同之处在于元素的包含块是视口。 MDN CSS 位置参考感谢您的评论。这是固定元素的默认行为，因为固定元素不会在上下文中将自身定位到其最近定位的父级，而是视口，从而在窗口中固定。正如您自己指出的那样，宽度增加了 16 像素，因为正文的默认边距为 8 像素。我发现的解决方法是采用 position: fixed 所在的元素并添加 width: -webkit-fill-available

css position

回答 5 投票 0

是否可以在具有 z-index 的父元素后面有一个子元素

我想知道是否可以在其父元素后面有一个具有 z-index 的子元素。我想使用父 div 作为其内容之上的透明颜色层。

css html position z-index

回答 5 投票 0

stat_bin 位置的奇怪行为

我试图覆盖样本中属于每个条形的人数百分比，但我无法将数字放在每个条形的顶部。即使我尝试简单地将每个百分比与 0 对齐，...

r ggplot2 position histogram

回答 1 投票 0

如何将 CustomTkinter 应用程序置于屏幕中央？

我得到它的方式，缩放在customtkinter中是dpi感知的，但定位不是？看来我需要在物理像素中设置关于 x++ 的 x_pos 和 y_pos （例如通过