CSS | position: absoluteで要素を自由な場所に配置する方法
CSSのpositionプロパティで要素を自由な場所に配置する方法とサンプルを紹介しています。
要素を自由な場所に配置する
CSSで親要素や隣接する要素の影響を受けずに、ページの絶対位置で自由配置するには要素に「position」プロパティで「absolute」を指定します。
See the Pen CSS Make child elements fixed width (display:flex) by yochans (@yochans) on CodePen.
HTMLでは自由配置にしたい要素「item」を<div>タグで設置しています。
親要素「container」も配置していますが、今回は基準値をページ左上端、<body>にするので親要素の有無は関係ありません。
<div class="container">
<div class="item"></div>
</div>「position: absolute;」は上層の要素に例えば「position: relative;」などを指定していない場合、基準となる要素は<body>になります。
「top」と「 left」を「0（px）」とした場合、要素の配置は親要素、隣接する要素など他の要素の影響を受けず左上端となります。
.container {
width: 100%;
height: 200px;
background: #000;
}
.item {
position: absolute;
top: 30px;
left: 40px;
width: 100px;
height: 100px;
background: #00bfff;
}