5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

positionプロパティを使い、親要素を基準として子要素の位置を指定する。

Posted at

以下のHTMLで、時刻をdivの中で一番上に表示したい時などに使える。

<div class="content">
    <h3 class="title">タイトル</h3>
    <p class="desc">内容

    </p>
    <time class="date" datetime="2016-03-15">時刻</time>
</div>

親要素に設定されているcontentクラスにposition:relative; を指定し、子要素に設定されているdateクラスに position:absolute; を指定すると、子要素はposition:relative; が指定された親要素からの相対位置に配置される。
ここでは相対位置(top、left)を指定していないので、最も左上に配置され、その結果、上から時刻・タイトル・内容の順番に表示される。

.content {
    position:relative;
}

date{
    position:absolute;
}
5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?