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

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

要素を重ね合わせるには

考え方は以下のとおり。
(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 右辺からの位置