Позиция перехода CSS по абсолютной величине от одного края к другому

Question

Как переместить HTML-div с абсолютным положением (right: 0; bottom: 0px) на другое ребро (left: 0px; top: 0px;).

Я пробовал следующий код, однако переход с абсолютными элементами работает только при использовании левого/верхнего или правого/нижнего.

Каков предпочтительный способ сделать это в HTML5?

var ele = document.getElementById("my-box"); 
 
ele.addEventListener("click", function() { 
 
\t ele.classList.toggle("clicked"); 
 
});

.box { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    transition: all 0.7s ease; 
 
} 
 
.box.clicked { 
 
    top: auto; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    right: auto; 
 
}

<div class="box" id='my-box'> 
 

 
</div>

Answer 1

Вы должны продолжать использовать top и right на нажатом ниже. Просто используйте известково позиционировать их, как показано ниже

var ele = document.getElementById("my-box"); 
 
ele.addEventListener("click", function() { 
 
\t ele.classList.toggle("clicked"); 
 
});

.box { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    transition: all 0.7s ease; 
 
} 
 
.box.clicked { 
 
    top: calc(100% - 100px); 
 
    right: calc(100% - 100px); 
 
}

<div class="box" id='my-box'> 
 

 
</div>

Answer 2

изменить ваш .clicked класс, как

.box.clicked { 
    transform:translate(calc(-100vw + 100px) ,calc(100vh - 100px)) 
}