Przejście do iz pozycji AUTO

Question

element jest dowolnie umieszczane na stronie, i musi przejść do stałej pozycji na imprezy (przewijania ekranu w moim przypadku, ale im przy unoszących się w skrzypce)

Oryginalny pozycja elementu jest wyśrodkowany z rodzicem (góra: auto i lewo: auto). Po najechaniu kursor powinien płynnie przejść do rogu ekranu (po lewej: 0, góra: 0), a następnie powrócić. Zamiast tego po prostu przeskakuje, ignorując właściwość przejścia.

Zdaję sobie sprawę, że żadna z przeglądarek nie obsługuje przejścia na tryb automatyczny, ale liczyła na to, że uda się to jakoś obejść.

fiddle

<div> 
    <span>test</span> 
</div> 

div { 
    border: 1px solid red; 
    text-align: center; 
    height: 100px; 
    margin: 15px; 
} 
span { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    background: blue; 
    transition: all 1s; 
    position: fixed; 
    left: auto; 
    top: auto; 
} 
div:hover span { 
    left: 0; 
    top: 0; 
} 

PS. Mam nadzieję na naprawę tylko css, ale rozwiązanie z JQuery również by działało.

Answer 1

Masz rację, że nowoczesne przeglądarki nie mogą przejść do trybu "auto". Możesz użyć CSS, aby osiągnąć to, czego szukasz.

W przykładzie musisz centrum zmieniając

top: auto; 
left: auto; 

do

vertical-align: top; 
left: calc(50% - 25px); 

Zdjąć górną nieruchomość od rozpiętości i rozpiętości: hover i zastąpić go vertical-align.

JSFiddle Example

Answer 2

Dlaczego nie można ustawić specyficzny top i left? masz span{position: fixed}, więc w tym przypadku zawsze wiesz o swoim top, right,, 8874882, left (w stosunku do rzutni).

więc spróbować z:

div { 
 
    border: 1px solid red; 
 
    text-align: center; 
 
    height: 100px; 
 
    margin: 15px; 
 
} 
 
span { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: blue; 
 
    transition: all 1s; 
 
    position: fixed; 
 
    left: 50%; 
 
    margin-left: -25px; /*or transform: translateX(-50%) if you don't know the width of span*/ 
 
    top: 16px; 
 
} 
 
div:hover span { 
 
    left: 0; 
 
    top: 0; 
 
    margin-left: 0; /*or transform: none if you don't know the width of span*/ 
 
}

<div> 
 
    <span>test</span> 
 
</div>

Można zmienić topleft podczas którego można osiągnąć to, co chcesz.

Here a jsfiddle example to play with