CSS 悬停元素推开其他 div 和布局答案

【问题标题】：CSS hover element pushes away other divs and layoutCSS 悬停元素推开其他 div 和布局
【发布时间】：2017-08-06 18:28:24
【问题描述】：

问题：当将鼠标悬停在 box1 上时，它应该展开而不影响其他 div 和文档布局，但我当前的代码将 box2 div 下推。

我希望 box1 在 box2 上展开而不影响其位置。

请帮忙！

JS Fiddle Demo

<div class = "box1">
    <p>first box</p>
    <ul style="list-style-type:none">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
</div>
<div class="box2">
    <p>2nd box</p>
</div>

CSS

.box1{
    height: 250px;
    width: 300px;
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid darkgray; 
    position: relative;   
}

.box1:hover{
    height: 400px;
    background-color: white;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    z-index: 1;
}

.box2{
    height: 150px;
    width: 400px;
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid darkgray;
    position: relative;
}

【问题讨论】：

标签： css html hover mousehover

【解决方案1】：

在 relative 父级中使用 position: absolute 和 .box1

.wrap {
  position: relative;
  height: 250px;
  width: 300px;
}
.box1 {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid darkgray;
  position: relative;
}

.box1:hover {
  height: 400px;
  background-color: white;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  position: relative;
  z-index: 1;
}

.box2 {
  height: 150px;
  width: 400px;
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid darkgray;
  position: relative;
}

<div class="wrap">
  <div class="box1">
    <p>first box</p>
    <ul style="list-style-type:none">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </div>
</div>
<div class="box2">
  <p>2nd box</p>
</div>

【讨论】：

【解决方案2】：

只需在样式中添加“margin-bottom: -150px”即可获得悬停效果。

【讨论】：

【解决方案3】：

好的，所以要将 box2 固定在某个位置，您需要设置 position: absolute 并将 box2 的顶部设置为某个值，并将其设置为某个值。所以，无论如何，box2 都不会改变它的位置。如果位置是相对的，box2 的位置会有所不同，并且取决于页面的其他元素（在本例中为 box1）。进行以下更改：

.box2{
    height: 150px;
    width: 400px;
    top: 300px;
    left: 0px;
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid darkgray;
    position: absolute;
}

根据您的要求设置顶部和左侧。上面改了CSS，不会动box2。希望这会有所帮助。

【讨论】：

抱歉信息不足。是的，它希望 box1 与 box2 重叠。

【解决方案4】：

移除height:400px 上的box1:hover 效果。它展开box1 div 并推送box2。

.box1{
    height: 250px;
    width: 300px;
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid darkgray;
    position: relative;
}

.box1:hover{
    background-color: white;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    z-index: 1;
}

.box2{
    height: 150px;
    width: 400px;
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid darkgray;
    position: relative;
}

<div class = "box1">
    <p>first box</p>
    <ul style="list-style-type:none">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
</div>
<div class="box2">
    <p>2nd box</p>
</div>

【讨论】：

但他希望这个 div 在悬停时展开，所以你的回答没有帮助