html - 展开时固定元素的位置

Question

有两个框(Box1、Box2)，当我将鼠标悬停在使用边距和填充上时，它们会展开。他们被赋予定制类(class)和设计。他们都漂浮离开了，这样他们就可以挨在一起了。

HTML:

<div class="contentbox-lg stk-left bg-red">
  <p class="contentbox-content">Box1</p>
</div>
<div class="contentbox-lg stk-left bg-blue">
  <p class="contentbox-content">Box2</p>
</div>

CSS:

/* Content Box Main CSS */

.contentbox-lg {
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  padding: 50px;
  width: 50px;
  height: 50px;
  margin-left: 50px;
  margin-top: 50px;
}

.contentbox-lg:hover {
  border: 3px;
  border-style: solid;
  border-color: black;
  padding: 73px;
  margin-left: 25px;
  margin-top: 25px;
}

.contentbox-content {
  top: 50%;
  left: 50%;
  color: white;
}

.stk-left {
  float: left;
}


/* Content Box Colors */

.bg-blue {
  background-color: #2980b9;
}

.bg-blue:hover {
  background-color: #3498db
}

.bg-red {
  background-color: #c0392b;
}

.bg-red:hover {
  background-color: #e74c3c
}

让我苦恼的问题是当 Box1 悬停时，第二个框会稍微向右移动，而当 Box2 悬停时，第一个框不会'别动。当鼠标悬停在 Box1 上时，我不希望 Box2 移动。

查找jsfiddle Demo here

Answer 1

摆脱悬停移动的一种方法是在框上使用 position:absolute

Like this

.contentbox-lg {
  position: absolute;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  padding: 50px;
  width: 50px;
  height: 50px;
  margin-left: 50px;
  margin-top: 50px;
}

.contentbox-lg { left: 200px;}
.contentbox-lg:first-child { left: 0;}