How can fixed element push content down the page using CSS only?

Question

I've seen similar question asked here before but answers usually include Jquery etc. I'm rookie and I want to use CSS only. I have a web page and there is a text displayed on it:

<P>yes yes yes </P>
<P>yes yes yes </P>
<P class="move">Moving part</P>

I want the last part (class move) to move on the top when screen is small. This works great:

.move {
    color: blue;
}
@media screen and (max-width: 600px) {
    .move {
        position: fixed;
        top: 0px;
    }
}

Except "Moving part" is displayed over text! How can I push the text down. I've tried height, etc.

Answer 1

There is position: sticky, but it's only supported in FireFox and Safari.

Unfortunately there is no way to mimic this for other browsers without JavaScript.

To do this requires the top to be calculated and modified as you scroll down the page. I've looked for a CSS only solution myself and it doesn't seem to exist, nor did my attempts work.

Have a look at the stickyMojo jQuery plugin or Bootstrap affix.