boxを相対的に配置する

Question

下記のようにBOX A,B,Zがあります。
BについてはAをtoggleするとことで表示されたり非表示になったりします。
Bの位置をAにかぶせた上で少しずらしたかったため、Aにはposition:relativeをBにはposition:absoluteを設定いたしました。

さて、ここでBの表示似合わせてですが、Zの位置をBにかぶらないようにしたいと考えているのですが
このコードのままでは被ってしまいます。

つまり、Bが表現されていない時にはAの直下に配置されており、Bの表示時にはBの直下まで下に
移動してほしいと考えております。つまりBの表示の有無に合わせて相対的に表示位置を被らせずに動かしたい
という趣旨になります。

CSS上、どのようにシンプルに設定すれば良いのか
ご教示をいただければ幸いです。

JS Fiddle

<div id="boxA" style="width:100px;height:50px;border:1px solid #ff0000; postion:relative;">
<div id="boxB" style="width:200px;height:100px;border:1px solid #0029ff;
  position:absolute;top:20px;left:20px;">
    </div>
     </div>
     
<div id="boxZ" style="width:100px;height:100px;border:solid 1px #000000"></div>

Answer 1

boxAのheightを指定している部分がありますがここを動かせないとなると
難しいと思います。サンプルではmin-heightにしています。
あとpositionに誤字があります。position:absoluteも親ボックスの高さを無視してしまうので
変更しています。

JS Fiddle

Comments

[pegy]

コメントいただきありがとうございます。
ご返信遅くなってしまい、誠に申し訳ございません。
位置関係とmax- min-の関係が腹落ちしないため、学んでみようと思います。