スタイルシート 要素の重なりについて

カテゴリ: CSS

記事投稿日: 2013年3月21日



絶対配置・相対配置を使いこなすと
独自のダイアログやツールチップを作ることができます。

要素を重ね合わせるには

考え方は以下のとおり。
(1) 規準となるボックスまたはbodyを「position: relative;」指定する。
(2) 重ねて表示したい要素を「position: absolute;」 指定する。
(3) z-indexで、各要素の重なり順を指定する。数値の大きいものほど上に表示される。
(4) 基準となる位置からさらにずらしたい場合は、top、leftプロパティを使って指定する。

例)幅と高さが100pxのボックスを画面中央に表示する場合は

body {
    width: 100%;
    position: relative;
    z-index: 0;
}

#box {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 3px solid #ccc;
    top: 50%
    left: 50%;
    margin-left: -50px;
    z-index: 10;
}

[コード解説]
bodyを基準として、画面の中央を left: 50%; で計算。
そのまま表示すると中央から表示されるので、ボックスの位置は右寄りになる。
そこでボックスの半分の幅の位置が、bodyの中心に合うよう、
margin-left を使って、ボックスの位置をで左に幅の半分の長さ分、移動させます。

positionプロパティ

absolute 絶対配置
relative 相対配置
static 通常配置
fixed 固定配置

top 上辺からの位置
bottom 下辺からの位置
left 左辺からの位置
right 右辺からの位置








コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA




トップに戻る