Jak ustalić element div, by był w tym samym miejscu po wcisnięciu f11(ekran pełny)

pytanie zadane 9 sierpnia 2018 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

<!Doctype html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Baloo+Paaji|Bowlby+One+SC|Overpass+Mono" rel="stylesheet"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

    
   <span id="javascript"> 
        <span id="j">J</span>
        <span id="a1">a</span>
        <span id="v">v</span>
        <span id="a2">a</span>
        <span id="s">s</span>
        <span id="c">c</span>
        <span id="r">r</span>
        <span id="i">i</span>
        <span id="p">p</span>
        <span id="t">t</span>
    </span>
<br>

<span id="kurs"> kurs</span> 

</body>
<html>

body{
background-color: rgb(73, 201, 252);
overflow: hidden;

}

#javascript{
height: 20vh;
position:relative;
left:54%;
top:66vh;
font-family: 'Overpass Mono', monospace;
font-family: 'Bowlby One SC', cursive;
font-family: 'Baloo Paaji', cursive;
font-size:15vh;
color:white;
letter-spacing: -1vh;
text-shadow: 2px 3px 4px black;
}


#kurs{

position:absolute;
right:-150%;
font-family: 'Overpass Mono', monospace;
font-family: 'Bowlby One SC', cursive;
font-family: 'Baloo Paaji', cursive;
font-size:9vh;
color:white;
letter-spacing: 1vh;
text-shadow: 2px 3px 4px black;
animation:1s kurs forwards;
animation-delay: 0.3s;
z-index: 2;
}
@keyframes kurs{
from{right:-150%;}
to{right:38%;top:60vh;}



}







#j{
animation:0.8s from_up forwards;
top:0vh;
position:relative;
left: 1%
}

@keyframes from_up{

from{top:-90vh;left:-130vh;}
to{top:0vh;left:0vh;}
}

#a1{
animation:0.8s a1 forwards;
top:0vh;
position: relative;
left:0%;



}

@keyframes a1{

from{top:70vh; left:-38vh;}
to{top:0vh;}
}




#v{
animation:0.8s v forwards;
top:0vh;
position:relative;
left:0%;
}

@keyframes v{

from{top:220vh;left:50vh;}
to{top:0vh;}
}

#a2{
animation:0.8s a2 forwards;
top:0vh;
position:relative;
left:0%;
}

@keyframes a2{

from{top:-80vh;left:-12vh;}
to{top:0vh;}
}

#s{
animation:0.7s s forwards;
top:0vh;
position:relative;
left:0%;
}

@keyframes s{

from{top:150vh;left:-37vh;}
to{top:0vh;}
}

#c{
animation:0.81s c forwards;
top:0vh;
position:relative;
left:0%;
}

@keyframes c{

from{top:140vh; left:140vh;}
to{top:0vh;}
}

#r{
animation:0.61s r forwards;
top:0vh;
position:relative;
left:0%;
}

@keyframes r{

from{top:150vh;left:-190vh;}
to{top:0vh;}
}
#i{
animation:0.8s i forwards;
top:0vh;
position:relative;
left:0%;
}

@keyframes i{

from{top:-60vh;left:130vh;}
to{top:0vh;}
}

#p{
animation:0.8s p forwards;
top:0vh;
position:relative;
left:0%;
}

@keyframes p{

from{top:100vh;left:200vh;}
to{top:0vh;}
}

#t{
animation:0.8s t forwards;
top:0vh;
position:relative;
left:0%;
}

@keyframes t{

from{top:0vh;left:600vh;}
to{top:0vh;}
}

</style>

komentarz 9 sierpnia 2018 przez shotokan Nałogowiec (39,660 p.)

Nie widzę elementu div w Twoim kodzie.

komentarz 9 sierpnia 2018 przez DariuszH Gaduła (3,100 p.)

Czy jest czy go nie ma. Wszystkiego próbowałem i nic :)

komentarz 9 sierpnia 2018 przez ScriptyChris Mędrzec (190,190 p.)

@DariuszH, doprecyzuj pytanie. Chcesz znać pozycję elementu względem ekranu po przejściu w tryb pełnego ekranu?

komentarz 10 sierpnia 2018 przez DariuszH Gaduła (3,100 p.)

Chcę żeby pozycja napisu się nie zmieniała. tzn litera t nie wychodziła poza obręb pola przeglądarki

komentarz 10 sierpnia 2018 przez DariuszH Gaduła (3,100 p.)

Może dojdę do tego. Jak się przyjrzeć dobrze, to napis proporcjonalnie zwiększa swoje rozmiary. Może jakiś atrybut css który pozostawi wielkość liter taką samą jak w podstawowym widoku.