使div在调整大小时不移动

Question

我试图在屏幕的一个角落定位一个div，以便我可以调整它的大小以覆盖屏幕。问题是，当我调整它的大小时，div会移动，如下面的代码片段所示。我尝试将效果应用于伪元素，但没有帮助。你知道如何在不移动的情况下调整项目的大小吗?

谢谢你的帮助。

$('button').click(function(){
$(this).closest('div').find('.cover').toggleClass('active');
console.log("test");
})

.main{
display:flex;
justify-content:space-around;
}
.item {
width:350px;
height:350px;
background-color:teal;
position:relative;
overflow:hidden;
}
.item .cover {
transition:all .5s linear;
width:20px;
height:20px;
background-color:orange;
position:absolute;
inset:-10px -10px auto auto;
border-radius:50%;
}
.item.no-pseudo .cover.active {
width:200%;
height:200%;
}
}
button{
margin-top:1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">  
<div class="container">
<div class="item no-pseudo">
<div class="cover"></div>
</div>
<button class="no-pseudo">Click to toggle effect on element</button>
</div>
</div>

Answer 1

您可以使用transform:scale(x)代替，默认情况下，transform-origin从元素的中心开始。

$('button').click(function(){
$(this).closest('div').find('.cover').toggleClass('active');
console.log("test");
})

.main{
display:flex;
justify-content:space-around;
}
.item {
width:350px;
height:350px;
background-color:teal;
position:relative;
overflow:hidden;
}
.item .cover {
transition:all .5s linear;
width:20px;
height:20px;
background-color:orange;
position:absolute;
inset:-10px -10px auto auto;
border-radius:50%;
}
.item.no-pseudo .cover.active {
transform:scale(50);
}
}
button{
margin-top:1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">  
<div class="container">
<div class="item no-pseudo">
<div class="cover"></div>
</div>
<button class="no-pseudo">Click to toggle effect on element</button>
</div>
</div>

Answer 2

用比例代替宽度和高度

$('button').click(function(){
$(this).closest('div').find('.cover').toggleClass('active');
console.log("test");
})

.main{
display:flex;
justify-content:space-around;
}
.item {
width:350px;
height:350px;
background-color:teal;
position:relative;
overflow:hidden;
}
.item .cover {
transition:all .5s linear;
width:20px;
height:20px;
background-color:orange;
position:absolute;

border-radius:50%;
}
.item.no-pseudo .cover.active {
transform:scale(20);
}
}
button{
margin-top:1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">  
<div class="container">
<div class="item no-pseudo">
<div class="cover"></div>
</div>
<button class="no-pseudo">Click to toggle effect on element</button>
</div>
</div>