HTML怎样将元素从右边移到左边,使用css将div从左上角移动到右下角

Tldr;

解决方案1：使用左/右/上/下定位

为了让你的div移动，你需要将父元素设置为relative，将div设置为absolute。请注意，因为html元素是“最顶层”元素。 html树的元素，它自动假定为relative位置。

＆＃13;

＆＃13;

div {

background: red;

height: 50px;

width: 50px;

position: absolute;

top: 0;

left: 0;

}

html:hover div {

top: auto;

left: auto;

bottom: 0;

right: 0;

}＆＃13;

解决方案2：转换

使用变换很棒，因为你可以添加过渡以获得平滑效果。请注意，您只需要对解决方案1添加一些细微的更改。

＆＃13;

＆＃13;

div {

background: red;

height: 50px;

width: 50px;

position: absolute;

top: 0;

left: 0;

transition: all 0.4s;

}

html:hover div {

top: 100%;

left: 100%;

transform: translate(-100%, -100%);

}＆＃13;

解决方案2的解释

要允许转换，DOM需要知道起点，终点和持续时间显式。因此，开始设置为

top:0; left:0;

表示左上角和左上角。

＆＃39;持续时间＆＃39;可以使用transition属性进行设置。在这里，我将其设置为0.4秒(秒)，但这可以更改为任何合适的值。

最后，最重要的是，您需要为转换设置明确的终点。在这里你会注意到

top:100%;left:100%;

但是，我确信你知道这样做会把左上角放在这个位置，(100％，100％)可以这么说。因此，包含translate以将盒子移回屏幕的原因是＆＃39;。 translate属性有两个值，X和Y处理。通过使用％作为单位，它将移动框的宽度或高度的百分比，具体取决于您移动它的轴。换句话说，使用

transform:translate(-100%, -100%);

将100％(自身)移动到左侧，100％(高度)向上移动，因此可以在页面的右下角看到。