絶対配置はCSSのポジションプロパティの設定ができます。
このページでは絶対配置で作れるレイアウトの例をいくつか解説します。
- ブロックを半分だけ被せる
- 背景を絶対配置で作成
ブロックの配置方法や使い方についてはこちらのページをご覧ください。
ブロックを半分だけ被せる
絶対配置を使って要素の上に乗せたり、半分だけ外に出すといったことが可能です。
- 親要素の配置で「relative」を選択
- 被せたい要素の配置で「absolute」を選択
- 設置場所を任意の位置に指定
- 「縦方向に半分出す」をONにセット
まずは親要素の配置を「relative」に設定します。
次に被せたい要素(この場合は黒い背景のカテゴリ)の配置を「absolute」に設定します。
あとは「配置の設置」のところで配置したい場所を9つの場所から選びます。ここでは左下にしてみます。
あとはその下にある「縦方向に半分外に出す」をオンにすれば半分だけ外に出すことが出来ます。
この例の場合テキストと若干被っているのでスペースをもう少し空けるなどして調整します。
背景を絶対配置で作成
背景はスタイルパネルで作るのが一般出来ですが、絶対配置とz-indexを組み合わせてブロックを背景画像として使用することが出来ます。
- グループブロックに画像ブロックを設置
- 親要素の配置を「relative」に設定
- 画像を設置したグループブロックの配置を「absolute」に設定
- グループを後ろに回り込ませる
- 幅と高さを調整
まずはグループブロックに画像を設置します。
次に親要素と画像を設置したグループブロックの配置設定をします。
位置を調整すると、画像のようにコンテンツの上に被ってしまうので、レイヤーパネルで順序を変更します。画像を設置したグループをコンテンツの上に移動します。
あとは「サイズ」の設定で幅と高さを100%などに設定したり、文字の色を修正して完成です。
