CSS hover要素が他のdivとレイアウトを押しのけます。

Question

問題：ボックス1にカーソルを移動すると、他のdivやドキュメントレイアウトに影響を与えずに展開する必要がありますが、現在のコードはbox2 divを押し下げます。

私は、ボックス1の位置に影響を与えずにボックス2を使いたいと思っています。

助けてください！

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

relative親で.box1で使用position: absolute

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

Answer 3

ただ、 "マージン下：-150px" を追加ホバー効果のスタイルに。

Answer 4

[OK]をクリックすると、box2がある位置に固定されているため、絶対位置は に設定し、box2の上部をある値に設定して値を残します。だから、何があっても、box2はその位置を変えません。 positionがrelativeの場合、box2の位置は変化し、ページの他の要素（この場合はbox1）に依存します。次の変更を行います。

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

要件に応じて左右に設定します。上記の変更されたCSSは、ボックス2を移動しません。 これが役立つことを願っています。