ほんっとにはじめてのHTML5とCSS3：【22-2】要素を絶対位置に指定する position: absolute

【22-2】要素を絶対位置に指定する position: absolute

最終更新日：2017年11月16日　（初回投稿日：2017年06月29日）

今回は positionプロパティの値の中でも良く使う absolute を見ていきましょう。
これは切り貼りするように要素を好きな位置に置くことができます。

本日のINDEX

position: absolute の親要素には position指定が必要
表示は上の方にしたいけど、さほど重要じゃないモノに
プルダウンメニューに position: absolute
要素の装飾に position: absolute はよく使います
1. 画像がめくれたようなシャドウをつけるアレも position: absolute
2. 見出しのアクセントにも大活躍な position: absolute

positionプロパティ は、記事を4つに分けました。

【22-1】位置指定の positionと top, right, bottom, leftプロパティ: positionプロパティの値と、top, right, bottom, leftプロパティの値の紹介。positionプロパティのうち static, relative を使います。
【22-2】要素を絶対位置に指定する position: absolute　←今日はココ: position: absolute を使う時のコツと、コレを使った要素の装飾をいくつか。
【22-3】要素を固定位置に指定する position: fixed: position: fixed の特徴や使用例、<header> を固定位置にした時のページ内リンクのズレの解消など。
【22-4】スクロールしていくとピタッと固定する position: sticky: position: sticky はスクロールしていくと必要なところで要素がピタッと止まります。

参考：
こちら↓はドラフト。
CSS Positioned Layout Module Level 3 -- W3C Working Draft, 17 May 2016
勧告済みの CSS2 はこちら↓
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work -- 9 Visual formatting model

position: absolute の親要素には position指定が必要

position: absolute は、絶対位置指定と言います。
absolute（アブソリュート）とは「絶対的な」といった意味。

この指定をされた要素は、他の要素との位置関係から切り離され、本来置かれる場所のスペースは詰められ、親以外の他の要素とは互いに位置的な影響を受けなくなります。
そして親要素からの上下左右の距離で位置が決められます。

親要素に position: static 以外の position指定をすることで、position: absolute はそれを親要素と認識して機能します。これ重要。
たいていの場合は position: relative を指定してあげればOK。
この場合の親は一番近い先祖の要素になるので、すぐ上の親でなくても、お爺さん、ひい爺さん、ひいひいひい爺さん要素でもOK。
言い換えれば、先祖で position指定されているものが親になるってことです。

そして、特に指定しなければ、親要素は <body> になります。
先祖に position指定されている要素が無ければ、親は <body>要素になるというルールです。

下のサンプルはまだ何にも position指定してません。<div>要素を3つ並べています。

3番目のボックスに「position:absolute; bottom:30px; left:30px」を指定してみると...ボックスが無くなりましたね。でも違うんです。一番下にいるんですよ。
（お手数ですが、このページの一番下へスクロールしてみると左の方にいます。戻ってきてね）

3（↑サンプルの本文へ戻る）

上のサンプルのHTMLとCSSです。

<div class="smp1">
 <div class="smp1box">1</div>
 <div class="smp1box">2</div>
 <div class="smp1box p-absolute">3（<a href="#">↑サンプルの本文へ戻る</a>）</div>
</div>

<style>
div.smp1 {margin:0;
	padding:10px;
    border:solid 1px #ccc;
    font-size:0}
.smp1box {
	-webkit-box-sizing: border-box;
    box-sizing: border-box; /*box-sizing*/
	display:inline-block; /*横並びに*/
	width:25%; /*幅を25％にしてるので、親が<body>になって大きくなったら幅も広がります*/
	margin:0 10px 0 0;
	background:#FC9;
	text-align:center;
	padding:1em;
	font-size:large}
.p-absolute {
	position:absolute;
    bottom:30px;
    left:30px}
</style>

これは親要素を指定していない（先祖の要素に position指定されたものが無い）ので、自動的に親要素が <body> になっているから、それを基準に「bottom:30px; left:30px」の位置に表示されたんです。
★本サイトは footer部分に FC2の広告タグがあって、正確に「bottom:30px」にはなってませんけどね。わかりにくくてごめん。

では、3つの <div> を囲んでいる 親要素に position: relative を指定します。
static 以外で一番無難な relative を指定。同時に top や leftプロパティなどを指定しなければ親要素の位置は変わりません。

こんな指定に変更します。

<div class="smp2">
 <div class="smp1box">1</div>
 <div class="smp1box">2</div>
 <div class="smp1box p-absolute">3</div>
</div>

<style>
div.smp2 {
	margin:0;
    padding:10px;
    border:solid 1px #ccc;
    font-size:0;
	position: relative}

/*これ以降の指定はさっきのと同じです*/
</style>

プレビューはこちらです。3番目のボックスの色も、わかりやすいように変えてみました。
ちゃんと親要素のエッジから、bottom: 30px、left: 30px になっています。

表示は上の方にしたいけど、さほど重要じゃないモノに

position: absoluteをどんな時に使うかなんですが、やはり HTML上での位置とプレビューの位置を変えられることが一番の特徴なので、アクセシビリティ的なことに利用されるのが多いかと思います。

例えば、レイアウト的には上の方に表示したいけど、内容的にはさほど重要じゃないので HTMLでは下のほうに書きたいものに、position: absolute を使います。
音声読み上げソフトだと、毎ページ最初に同じことを読み上げてウザイですからね。

プルダウンメニューに position: absolute

以前の記事【17-1】displayプロパティでボックスの表示形式を自由に変えようの display: none の箇所でも紹介しましたが、position: absolute と display: none を使って、CSSだけでプルダウンメニューを作れます。

ただし「:hover」を使うのでPCサイトのみ。
スマホの場合のプルダウンメニューは、jQueryの「.toggleClass」などを使うとイイですね。

マウスオーバーしてみてください。

MENU1

<ul>要素を入れ子にし、子供のほうの<ul> をプルダウンするメニューにします。
これを position: absolute で親メニューの真下に位置調整し、普段は display: none で非表示に、親メニューをマウスオーバーしたら display: block で表示するという仕組みです。

上のサンプルのHTMLです。

<ul id="smp2_4">
  <li><a href="#">MENU1</a>
    <ul>  <!-- li要素の中に ulを入れ子にします。これが肝心-->
      <li><a href="#">Sub menu1</a></li>
      <li><a href="#">Sub menu2</a></li>
      <li><a href="#">Sub menu3</a></li>
    </ul>
  </li>
</ul>

サンプルのCSSです。

ul#smp2_4 {
	position:relative; /*親のulにposition:relativeを指定しておきます*/
	z-index:10;        /*他のコンテンツより上のレイヤーにしておきます。*/
	margin:0;
	padding:0}
ul#smp2_4 li {         /*子孫セレクタで、すべてのli（孫も）への指定です*/
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
	display:inline-block; /*親のliは横に並ぶ指定です*/
	text-align:center;
	line-height:1em;
	margin:0 5px 0 0;
	padding:0;
	width:110px;
	background:#fdf5a0;
	border-radius:0.5em}
ul#smp2_4 li a {display:block; padding:1em}
ul#smp2_4 li ul li a {display:block; padding:0.5em 1em}
ul#smp2_4 li ul {
	display:none;      /*通常は非表示にしておきます*/
    position:absolute; /*絶対位置指定すれば、表示されても他の要素に影響を与えません*/
	top:2.5em;
	margin:0;
	padding:0}
ul#smp2_4 li ul li {
	display:block;     /*サブメニューのliはブロックレベルに戻して縦に並べます*/
	border:solid 2px #fdf5a0;
	border-top:none;
	background:#fff;
	border-radius:0}
ul#smp2_4 li ul li:last-child {border-radius:0 0 0.5em 0.5em}
ul#smp2_4 li:hover > ul {
	display:block} /*親のliにマウスオーバーしたら、その中のulを表示します*/

要素の装飾に position: absolute はよく使います

position: absolute は要素の装飾にもよく使われます。
他の要素に影響を与えずに、好きな位置に要素を表示できるので、切り貼りのような感覚で使えます。

画像がめくれたようなシャドウをつけるアレも position: absolute

画像がめくれたようなシャドウってありますよね。
これは擬似要素「::after」「::before」にボックスシャドウを付けて、position: absolute で強制的に下のほうに持っていってるんです。

上のサンプルでは、擬似要素「::before」で左のシャドウを作り「position: absolute; bottom: 7px; left: 15px」で親の左下に配置。「transform: rotate(-3deg)」で時計逆回りに3°回転しています。
右半分のシャドウは擬似要素「::after」で同様に作って、時計回りに3度回転させています。

画像がめくれたようなシャドウの HTMLです。

<div class="smp3"><img src="image.jpg"></div>

画像がめくれたようなシャドウのCSSLです。

.smp3 {
	line-height:0;
	position:relative;  /*親要素にposition:relative*/
	width:60%;
	z-index:2}
.smp3 img {width:100%;  height:auto}
.smp3::before, .smp3::after {  /*「::before」「::after」両方に指定。親のdivの疑似要素です*/
	content: "";
	box-shadow: 0 0 8px 10px rgba(0,0,0,0.3);
	width: 50%; /*幅や高さが無いので、幅のみ親要素の50％に伸ばします*/
	position: absolute;
	z-index:1;  /*親（div.smp3）よりも下の重なり順にします*/
	bottom: 7px}  /*親の下部から7pxの位置にします*/
.smp3::before{  /*疑似要素before（左側のシャドウ）*/
	left: 15px;  /*親の左から15px*/
	transform:rotate(-3deg)}  /*時計逆回りに3度回転*/
.smp3::after{  /*疑似要素after（右側のシャドウ）
	right: 15px;  /*親の右から15px*/
	transform:rotate(3deg)}  /*時計回りに3度回転*/

7行目で「.smp3::before, .smp3::after」というセレクタがありますが、
これは「.smp3::before」というセレクタと「.smp3::after」というセレクタを「,（カンマ）」で連結させて、2つ同時に指定しています。
共通する指定がある場合、このようにセレクタを連結させると、同じことを何度も書かなくて済みます。3つでも4つでもいくつでも連結することができます。

box-shadow の値は「0 0 8px 10px rgba(0,0,0,0.3)」になっていますが（9行目）
これは「右への水平方向の移動」「下への垂直方向の移動」「ぼかす幅」「拡張（縮小）させる幅」「色」の順になってます。
ここでは、右や下へは動かさず、ぼかしの幅を8px、拡張幅を10px、色は黒の透明度0.3にしてます。
box-shadow の詳細は [18-2] CSS3で、ボックス要素にシャドウをつけよう（box-shadow）を、
色指定は、[14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）をご覧ください。

擬似要素「::before」「::after」は、float の Clearfix にも使いましたが、指定した要素の内側に インライン要素としてコンテンツを生成します。

★擬似要素については、【3】id とか classって何？（セレクタの「種類」を知っておこう）でざっくりメモっています。
（たいして詳しくないですけどね。疑似要素や擬似クラスについては、いずれちゃんとまとめます）

上のサンプルのコードでは z-indexプロパティも使っていますね（5、12行目）
これはシャドウを画像の下に持って来るための指定です。コレが無いとうまくいきません。
z-indexについては【23】要素の重なり順の上下関係を指定する z-indexプロパティ で説明していますのでご覧ください。

ちなみに、サンプルの<img>要素に「visibility: hidden」を指定してみると、こんな舞台裏です。
こんなもんが画像の下にあるだけで、ちょっとめくれて見えるって、人間の目って不思議ですね。

見出しのアクセントにも大活躍な position: absolute

見出しやメニュー部分の装飾にもよく position: absolute が使われます。やっぱり擬似要素「::after」「::before」を同時に使うんですけどね。
見出しの装飾のCSSをいくつかご紹介しときます。原理がわかればいろいろアレンジできておもしろいよね。

四角を2つアクセントに

リボンっぽい見出し

リボンっぽいクリップ付きの見出し

吹き出しっぽい見出し

四角を2つアクセントに

HTML

<div class="smp4">
<h3 class="hlsmp1">四角を2つアクセントに</h3>
</div>

CSS

.smp4 {margin:0; padding:30px; border:solid 1px #ccc}
.smp4 h3 {margin:0 0 30px; font-size:20px}

h3.hlsmp1 {
	position:relative;
	padding:0 0 .2em 1.5em;
	border-bottom:dotted 2px #d682a9}
h3.hlsmp1::before, h3.hlsmp1::after {
	content: "";
    position:absolute;}
h3.hlsmp1::before{  /*大きいほうの四角*/
	background: #e6b2ca;
	bottom:1em;
	left:.4em;
	height:13px;
	width:13px;
	transform: rotate(45deg)}
h3.hlsmp1::after{  /*小さいほうの四角*/
	background:#d682a9;
	bottom:.4em;
	left:.2em;
	height:8px;
	width:8px;
	transform:rotate(15deg)}

リボンっぽい見出し

HTML

<div class="smp4">
<h3 class="hlsmp2">リボンっぽい見出し</h3>
</div>

CSS

.smp4 {margin:0; padding:30px; border:solid 1px #ccc}
.smp4 h3 {margin:0 0 30px; font-size:20px}
h3.hlsmp2 {
	position:relative;
	background:#b2c5e6;
	color:white;
	margin-left:-40px;  /*ネガティブマージンで左にはみ出させます*/
	margin-right:-40px;  /*同じく右にはみ出させます*/
	padding:.5em 2em;
	box-shadow: 0 1px 2px rgba(73, 113, 182,.5)}  /*立体感を出すために*/
h3.hlsmp2::before, h3.hlsmp2::after {
	content: "";
	position:absolute;
	top:100%;  /*上辺がh3の一番下辺になります*/
	width:0;
	height:0;
	border:5px solid;
	opacity:0.5}
h3.hlsmp2::before {  /*リボンの裏側が見えてるっぽい小さい三角形の左側のやつ*/
	left:0;
    border-color:#4971b6 #4971b6 transparent transparent} /*上と右だけ色付き、他は透明*/
h3.hlsmp2::after {  /*リボンの裏側が見えてるっぽい小さい三角形の右側のやつ*/
	right:0;
    border-color:#4971b6 transparent transparent #4971b6} /*上と左だけ色付き、他は透明*/

リボンの裏側が見えてるっぽい小さい三角形は、幅や高さのないボックスに border を指定することで作っています。

小さい三角形を作る原理は 【13-1】borderと borderのショートハンド で説明しています。

リボンっぽいクリップ付きの見出し

HTML

<div class="smp4">
<h3 class="hlsmp3">リボンっぽいクリップ付きの見出し</h3>
</div>

CSS

.smp4 {margin:0; padding:30px; border:solid 1px #ccc}
.smp4 h3 {margin:0 0 30px; font-size:20px}
h3.hlsmp3 {
	position:relative;
	background: #d1f0e2;
	box-shadow: 0 0 0 4px #d1f0e2;  /*borderよりも輪郭をはみ出させています*/
	color:white;
	border-radius: 8px;
	border:dashed 2px #f0faf5;
	padding:.5em;
	padding-left:1em}
h3.hlsmp3::before, h3.hlsmp3::after {
	content: "";
	position:absolute}
h3.hlsmp3::before {
	top:12px;
    left:-10px;
    width:15px;
    height:20px;
    background: #88ceae}  /*リボンの色*/
h3.hlsmp3::after{
    top: 12px;
    left:-5px;
    width: 0;
    height: 0;
    border:10px solid;
    border-color:#88ceae transparent}  /*リボンの端っこ（上下が色付き、左右は透明）*/

リボンの端っこの三角形2つは、幅や高さのないボックスに border を指定することで作っています。

小さい三角形を作る原理は 【13-1】borderと borderのショートハンド で説明しています。

吹き出しっぽい見出し

HTML

<div class="smp4">
<h3 class="hlsmp4">吹き出しっぽい見出し</h3>
</div>

CSS

.smp4 {margin:0; padding:30px; border:solid 1px #ccc}
.smp4 h3 {margin:0 0 30px; font-size:20px}
h3.hlsmp4 {
	position:relative;
	background: #f1decb;
	color:white;
	padding:.5em 1em;
	border-radius:20px}
h3.hlsmp4::after{
	content: "";
	position:absolute;
	width:0;
    height:0;
	top:100%;
	left:2em;
	border:8px solid transparent;
    border-top:8px solid #f1decb}

吹き出しの小さい三角形は、幅や高さのないボックスに border を指定することで作っています。

小さい三角形を作る原理は 【13-1】borderと borderのショートハンド で説明しています。

次回予告

position: absolute って慣れるとオモシロイことがいろいろできて便利ですね。
使い方のコツは「親要素にしたいヤツに position 指定をする」ことですかね。

さて次回は、position: fixed を使ってみましょう。
これは、要素を画面（ビューポート）に対して固定位置に指定します。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-11-16（Thu）│
投稿日：2017-06-29（Thu）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿

Pagetop ↑

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

ほんっとにはじめての HTML5 と CSS3

【22-2】要素を絶対位置に指定する position: absolute

position: absolute の親要素には position指定が必要

表示は上の方にしたいけど、さほど重要じゃないモノに

プルダウンメニューに position: absolute

要素の装飾に position: absolute はよく使います

画像がめくれたようなシャドウをつけるアレも position: absolute

見出しのアクセントにも大活躍な position: absolute

四角を2つアクセントに

リボンっぽい見出し

リボンっぽいクリップ付きの見出し

吹き出しっぽい見出し

四角を2つアクセントに

リボンっぽい見出し

リボンっぽいクリップ付きの見出し

吹き出しっぽい見出し

初心者にも使いやすい（と思う）レンタルサーバー

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-