Question

我有一组彼此相邻的图像。

我正在尝试使用z-index在悬停时调整其宽度和高度。尺寸发生变化，它会影响附近元素的位置。

问题：有没有办法在不影响附近元素定位的情况下使用z-index进行缩放？

.some{
  position:relative;
  width:250px;
  height:250px;
}
.some:hover{
  z-index:10;
  width:500px;
  height:500px;
}

<div>
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
</div>

这是小提琴 https://jsfiddle.net/jftr2vg0/

Answer 1

尝试转换它，而不是更改元素的宽度和高度。这应该可以防止它在它周围移动元素。

transform: scale(2);

这是一个小提琴：

https://jsfiddle.net/5bew5wu5/6/

Answer 2

如果你想坚持使用这种方法（可能有更简单和更有效的其他方法），使用绝对定位，从正常流中移除元素，而不是相对定位，而不是，因此，影响周围元素。

这是一个基本的例子：

.cont {
  position: relative;
}

.some {
  width: 250px;
  height: 250px;
  position: absolute;
}

.some:hover {
  z-index: 10;
  width: 500px;
  height: 500px;
}

img:nth-child(1) { top: 0; left: 0; }
img:nth-child(2) { top: 0; left: 255px; }
img:nth-child(3) { top: 0; left: 510px; }
img:nth-child(4) { top: 255px; left: 0px; }
img:nth-child(5) { top: 255px; left: 255px; }
img:nth-child(6) { top: 255px; left: 510px; }

<div clas="cont">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
</div>

在悬停时更改元素的宽度和高度

2 个答案: