css - CSS でサイドパネルのオブジェクトを切り替える

Question

フォーラムの各メンバーのプロフィールページに、切り替えたいボックスが 2 つあります。

スクリーンショット:

「マイバッジ」セクションの下に「概要」セクションが必要です

これはCSSだけで可能ですか？

score 0 · Accepted Answer

ボックスの高さが一定の場合、相対位置を使用して切り替えることができます。つまり、ボトムボックスの高さなどのためにトップボックスを下にシフトすることができます。

.Box.About {
   position: relative;
   top: 114px;
}

.Box.PeregrineBadgesBox {
   position: relative;
   top: -178px;
}

score 0 · Accepted Answer

最良の方法は、HTML 内でを交換する<div>ことですが、絶対位置を少し使用して div を移動することができます。

たとえば、これはうまくいきます：

.about{
position: absolute;
width: 230px;
bottom: -30px;
}

しかし、最良の選択肢は、HTML の順序を変更するだけで、単純にコピーして貼り付けることだと思います。

css - CSS でサイド パネルのオブジェクトを切り替える