要素の配置方法を設定するプロパティposition

2015年6月22日

コンテンツボックスは、画面の左上だったり、親要素の左上が
基準の位置です。postitionプロパティを使用すると、相対位置や
絶対位置を変更することができます。

static	デフォルト値。配置方法を指定しない。親要素の左上が基準の位置。「top」「bottom」「left」「right」は適用されない。
relative	相対位置。親要素の左上が基準の位置。「top」「bottom」「left」「right」で起点を設定できる。
absolute	絶対位置。親要素に「position:static」が設定されているか、何も設定が無い場合は、画面の左上が基準の位置となる。
fixed	absoluteと同様に絶対位置で配置されるが、画面がスクロールしても同じ位置にボックスがそのまま。

実際にサンプルコード書いてみたので、
HTMLとCSSをコピーして実行してみてください。

    *{margin:0;padding:0;}
    
    #container{
        width:640px;
        height:640px;
        background-color:#f0f0f0;
        margin:0 auto;
    }

    #parent{
        width:300px;
        height:300px;
        background-color:aqua;
    }
    #child1{
        width:100px;
        height:50px;
        background-color:blue;
    }

    #child2{
        width:100px;
        height:100px;
        background-color:brown;
    }
    .relative{position:relative;}
    .absolute{position:absolute;}
    .top100{top:100px;}
    .left100{left:100px;}

*{margin:0;padding:0;}

#container{

width:640px;

height:640px;

background-color:#f0f0f0;

margin:0 auto;

}

#parent{

width:300px;

height:300px;

background-color:aqua;

}

#child1{

width:100px;

height:50px;

background-color:blue;

}

#child2{

width:100px;

height:100px;

background-color:brown;

}

.relative{position:relative;}

.absolute{position:absolute;}

.top100{top:100px;}

.left100{left:100px;}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

<div id="container">

    <div id="parent">
        <div id="child1" class="relative top100 left100"></div>
        <div id="child2" class="absolute top100 left100"></div>
    </div>
    
</div>    
    
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

</div>

</body>

</html>

実行すると、茶色の四角は、ブラウザから見て
上から100px、左から100pxに固定されています。

一方青い四角は、親要素の水色の四角に引きずられて
表示されているのがわかるかと思います。
ブラウザのサイズを変更しながら見ると分かりやすいかと
思います。