Не допускайте перемещения div при изменении размера

#css

Вопрос:

Я пытаюсь расположить 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>

Ответ №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>

Ответ №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>