Question

我需要一个标头1元素，该元素保持固定在屏幕顶部并具有相对位置。以下是HTML元素：

<h1 class="sticky">Text goes here</h1>

这是CSS：

.sticky {
    top: 0;
    text-align: center;
    position: relative;
    position: fixed;
    /* I know I cannot add multiple */
    /* position properties, so my */
    /* question really is what should */
    /* I do from here? */
}

由于某种原因，这似乎不起作用。我要么使用粘性，要么相对。有解决办法吗？

Answer 1

文本居中...问题在于，使用position:fixed使div与文本具有相同的宽度，因此在其周围没有多余的空间，因此不会。 t 出现居中。

您需要做的就是将div设置为屏幕的整个宽度，然后文本将在整个宽度上居中，而不是放在较小的容器中。

.sticky {
    text-align: center;
    position: fixed;
    /* rest of your CSS here... */
}

您可以在此工作片段中看到它：

.sticky {
    top: 0;
    width:100%;
    text-align: center;
    position: fixed;
}

<h1 class="sticky">Text goes here</h1>

有没有一种方法可以将多个CSS位置属性应用于HTML元素？

1 个答案: