div：ディスプレイの空白を埋めていない：table;

Question

私はスライドショーを作成しました。右側にはdivがあり、その上にカーソルを置くと拡大され、divからカーソルを離すと縮小します。しかし、脇（divの親）は正しい場所にあるべきです、それは脇の下の要素の上を満たしていないdivです。他の要素を壊さないようにdivを取得するにはどうすればよいですか？

.thing { 
 
    height: 120px; 
 
    width: 250px; 
 
    z-index: 10; 
 
    position: relative; 
 
    border: 5px solid brown; 
 
} 
 
.thing:hover { 
 
    position: absolute; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 11; 
 
} 
 
.report { 
 
    text-align: left; 
 
    vertical-align: top; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.aside { 
 
    display: table-cell; 
 
    padding-top: 5px; 
 
    width: 250px; 
 
    border-radius: 10px; 
 
    border: 2px solid black; 
 
    overflow: hidden; 
 
    position: relative; 
 
    height: 385px; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 750px; 
 
    height: 400px; 
 
    border-radius: 5px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
}

<div class="report"> 
 
    <div id="imgGallary" class="container"> 
 
    <img src="images/companies.png" alt="" width="750" height="400" /> 
 
    <img src="gallery" alt="" width="750" height="400" /> 
 
    </div> 
 
    <aside class="aside"> 
 
    <div id="c1"></div> 
 
    <div class="thing" style="background-color: blue;"> 
 
     <h1>Find Us!</h1> 
 
    </div> 
 
    <div class="thing" style="background-color: orange;"></div> 
 
    <div class="thing" style="background-color: pink"></div> 
 
    </aside> 
 
</div>

Answer 1

あなたのCSSレイアウトはdisplay: tableとdisplay: relativeを混乱さ。彼らはあなたのように互換性がありません。 .containerとasideをレイアウトする好ましい方法は、f loatsを使用することです。あなたの例を修正して、これらの2つのコンテナを隣り合わせに浮かべるようにしました（おおよそ幅80/20の分割）。これにはレイアウトを反応させるための追加ボーナスがあります。

ワーキングcodepen： http://codepen.io/staypuftman/pen/vKoPmw

.thing { 
    height: 120px; 
    width: 250px; 
    position: relative; 
    border: 5px solid brown; 
} 
.thing:hover { 
    position: absolute; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 
.report { 
    text-align: left; 
    vertical-align: top; 
    display: table; 
    width: 100%; 
} 
.aside { 
    padding-top: 5px; 
    width: 18%; 
    border-radius: 10px; 
    border: 1% solid black; 
    overflow: hidden; 
    float: left; 
    position: relative; 
    height: 385px; 
} 
.container { 
    float: left; 
    width: 80%; 
    height: 400px; 
    border-radius: 5px; 
    border: 1px solid black; 
    overflow: hidden; 
}