主页 / 问题 / 1330923
Accepted
BERTOLDO
Asked:2022-09-22 16:56:13 +0000 UTC2022-09-22 16:56:13 +0000 UTC

为什么粘性块忽略左右坐标？

  • 772

我需要拉伸搜索块，使其占据屏幕的整个宽度。这个块以给定的宽度放置在主容器中，这可能是粘性块不起作用的原因，但是，它也应该像一个绝对定位的块并忽略父级（位置：relative 不包含在主容器中）。

如何拉伸粘性块以适应屏幕的整个宽度？

/*блок родитель*/
.main {
    width: 1280px;
    flex-grow: 1;
    margin: auto;
}

/* search box*/
.search-box {
    border-bottom: 2px solid #ffffff;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
css

2 个回答

  1. Best Answer

    粘性元素将相对于其在滚动容器中最近的祖先进行定位。那些。我们不需要为父元素设置- 如果它是可滚动元素（文档）中的直接父position:relative元素.main，它已经属于这些条件。.search-box

    也许在您的示例中，问题完全由 style 解决.search-box {position:fixed}，但这并不准确，因为 问题中未显示 html 代码。

    • 1

  2. Sticky 不仅可以垂直工作，还可以水平工作。所以你不能左右定位它——它们只会影响水平滚动。如果块的默认位置适合您，您可以将它们替换为宽度。如果不满意，则通过 2 个嵌套块进行。

    • 0

相关问题