我试图创建JS函数，通过点击它来调整图像大小。它工作，但我有重叠的内容问题。在我点击图像后，它将调整大小和重叠的内容上面和下面我的图像我试图设置宽度，高度，位置（绝对），但没有工作。我想把内容推离图像。
null
let img = document.getElementById("changeImg");
// Function to increase image size
function scaleupImg() {
// Set image size to 2 times original
img.style.transform = "scale(2)";
// Animation effect
img.style.transition = "transform 0.25s ease";
}#changeImg {
width: 50%;
height: 50%;
padding: 10px;
margin: 10px;
}
.cool-icon-box {
width: 100%;
height: 1000%;
padding: 10px;
margin: 10px;
}<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
<div class="cool-icon-box">
<img id="changeImg" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" alt="" onclick="scaleupImg()">
</div>
</section>
<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>null
css scale（）函数将始终覆盖相邻元素。试试这个。。
let img = document.getElementById("changeImg");
// Function to increase image size
function scaleupImg() {
// Set image size to 2 times original
img.style = "height:100%;width:100%";
// Animation effect
img.style.transition = "transform 0.25s ease";
}
在CSS中的image元素上设置transition，将width作为要进行transition的属性。在代码中，删除转换的设置。点击图像时，只需应用img.style.width=“100%”即可。
使用scale的问题是它会在适当的位置缩放图像，因此，它可能会与其他元素重叠。
null
let img = document.getElementById("changeImg");
// Function to increase image size
function scaleupImg() {
// Set image size to 2 times original
img.style.width = "100%";
}#changeImg {
width: 50%;
height: 50%;
padding: 10px;
margin: 10px;
transition:width 0.25s ease;
}
.cool-icon-box {
width: 100%;
height: 1000%;
padding: 10px;
margin: 10px;
}<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
<div class="cool-icon-box">
<img id="changeImg" src="https://3.bp.blogspot.com/-7x5c_f1yzsQ/XHv9FZKHrEI/AAAAAAAADrE/4iGl9Lm6K2odX4SdWbU_RN6gZesx4IaGACEwYBhgL/s1600/html.jpg" alt="" onclick="scaleupImg()">
</div>
</section>
<section>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra cursus ex, eget auctor lectus volutpat sed. Maecenas vel ornare arcu.</p>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
这是因为只有在将元素插入DOM之后，才会应用Position:Relation定位和Transform-属性对元素的更改。
我的意思是，通过使用Position:Relation与Top-，Left-，Right-和Bottom-属性以及使用Transform-属性对元素进行的可视化更改不会影响其父或其子元素的布局。这些更改只影响元素本身及其子元素。
