Is there a way to apply multiple CSS position properties to an HTML element?

Question

I need a header 1 element that stays fixed at the top of the screen and has a relative position. Here are the HTML elements:

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

And here is the 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? */
}

For some reason, that doesn't seem to work. I either use sticky, or relative. Is there a fix for this?

An element can only have one position - anything more doesn't make sense - ans As you already know (I assume), the second `position` simply overrides the first. What is the purpose of trying to do this? If you explain what you are trying to do, we might be able to help! — FluffyKitten, Aug 29 '20 at 02:50
Well I basically need the h1 element to stay centered while maintaining a fixed position. Is this possible? — Martin McWatters, Aug 29 '20 at 02:52
@FluffyKitten OP already knows about this as per the comment in CSS. — Always Helping, Aug 29 '20 at 02:52
How about wrapping your h1 with a span and give it the class sticky then make new class for your h1 and give it position relative that should work — Ahmad Dalao, Aug 29 '20 at 02:53
@AhmadDalao I'll try that and see if it works. Thanks for the advice. — Martin McWatters, Aug 29 '20 at 02:54
@AhmadDalao there is no need for adding extra elements - it's simply a matter of making the sticky div take up the full with of the screen. — FluffyKitten, Aug 29 '20 at 02:58
@FluffyKitten Agree with you! There is no need to for `span` element as long as if thats what OP is after. — Always Helping, Aug 29 '20 at 02:59

score 0 · Answer 1 · answered Aug 29 '20 at 02:56

The text is being centred... the problem is that using position:fixed makes the div the same width as the text, so there is no extra space around it so it doesn't appear to be centred.

All you need to do is make the div the full width of the screen, then the text will be centred across the full width rather than in a smaller container.

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

You can see it in this Working Snippet:

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

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

Is there a way to apply multiple CSS position properties to an HTML element?

1 Answers1