visibility:hidden;指定後に要素の高さを失くす方法

html/cssで要素の存在をなくす方法といえばvisibility: hidden;とdisplay:none;があります

display:none;は存在が透明になり、かつ要素の高さも消えます。また、親要素にこれを指定した場合、子要素だけの表示はできません。

visibility: hidden;は存在が透明になりますが、要素の高さは消えません。なのであった場所に空白が生じます。

また子要素にvisibility: visible;を指定することで子要素だけの表示も可能です。

何かと便利なvisibility:hidden;ですが、問題は空白が生じてしまうことです。

position:relative;とposition:absolute;を消した要素とそれに隣接している要素につけて重ね合わせて、z-indexで高さを出して要素の高さを失くすことに成功しました。