Fixed Textbox in Gridder

[leandrodisler]

Hey
I've created a centered/fixed text-element on this Page:
http://leandrodisler.com/archiv
Password is: hello

I've made a regular textbox in the gridder and gave it a HTML class.
This is in my Custom CSS:

.archive{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Now the Problem: as you see the element is fixed and centered first but when i scroll the element jumps and takes a new position.

What could be the reason for this?

ps. Also i would love to have this text in front of the whole content of the site, is this possible?

Thanks

[leandrodisler]

I now changed it to:

.archive{
position: fixed;
top: 35%;
}

Now the textbox dont jumps. But i dont have the exact reult as i wanted with the position...

[mariusjopen]

Dear @leandrodisler
centering an element vertically is still a pain in the ass in 2018.
There are many ways to achieve this.
But in your case I would go for the super-simple solution:
Give the font a proportional size (vh) and and position it like that.

Since you do not have a dynamic text inside – this is totally possible.

Best!

Marius

[leandrodisler]

Like this?

.archive{
font-size:40vh;
position: fixed;
top: 32%;
}

[mariusjopen]

Dear @leandrodisler
sure! If that works for you.

Best!

Marius