CSS懸停元素推開其他div和佈局

Question

問題：將鼠標懸停在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; 
} 

Answer 1

使用position: absolute與.box1在relative父

.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>

Answer 2

刪除height:400px關於box1:hover的影響。它擴大box1股利並推動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>

Answer 3

只需添加 「邊距：-150px」 到樣式懸停效果。

Answer 4

好吧，爲了讓box2固定在某個位置，您需要設置位置：絕對 並將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。 希望這有助於。