Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8833

マイライブラリ:positionプロパティ

$
0
0

親要素内で、子要素の位置をCSSでデザインする

親要素にposition:relativeで基準位置を作る
子要素にposition:absoluteで基準位置からの絶対値で位置を指定する
そしてtopbottomleftrightで具体的な位置を指定する。

↓は黄色い親要素のボックスの右上に文字を配置

HTML

<div class="sotowaku">
  <div class="moji">文字</div>
</div>

CSS

.sotowaku{
  width:300px;
  height:300px;
  background:yellow;
  position:relative;
}

.moji{
  position:absolute;
  top:0;
  right:0;
}

Viewing all articles
Browse latest Browse all 8833

Trending Articles