CSS | position/top/bottom/left/right/z-index | 位置

positionは位置を指定するためのCSSプロパティです。top、bottom、left、right、および重なりの順番を指定するz-indexについても解説します。

`position`

`position`の設定値
設定値	意味	デフォルト
`static`	デフォルト
`relative`	本来あるべき位置に対して相対的
`absolute`	`: relative`である直近の先祖要素に対して絶対的
`fixed`	ブラウザの対して固定

親子関係のある<div>要素を準備します。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

実行結果初期状態

parent

child-1

child-2

child-3

`: relative`

.childrenクラスにposition: relativeを指定します。全ての子要素は本来あるべき位置にあり、まだ表示は変わりません。

position: relativeに加えてtop/bottom/left/rightのCSSプロパティを使うことで、本来あるべき位置から相対的に移動させることができます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.children { position: relative; }

実行結果本来あるべき位置

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.children { position: relative; }

.child-2 { left: 2rem; }

実行結果.child-2を右に移動

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.children { position: relative; }

.child-2 { left: 2rem; }

.child-3 { top: 2rem; }

実行結果.child-3を下に移動

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.children { position: relative; }

.child-2 { left: 2rem; }

.child-3 { top: 2rem; }

.child-1 {
    bottom: 2rem;
    right:  3rem;
}

実行結果.child-1を左上に移動

parent

child-1

child-2

child-3

`: absolute`

position: absoluteを使うためには、まず親要素.parentにposition: relativeを指定する必要があります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.parent { position: relative; }

実行結果absolute

parent

child-1

child-2

child-3

.child-3にposition: absoluteを指定します。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.parent { position: relative; }

.child-3 {
    position: absolute;
}

実行結果absolute

parent

child-1

child-2

child-3

加えて.child-3にtop: 0、bottom: 0、left: 0、right: 0を指定した結果を示します。 .child-3が親要素に対して絶対的な位置に移動することが分かります。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.parent { position: relative; }

.child-3 {
    position: absolute;
    top: 0;
}

実行結果top: 0

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.parent { position: relative; }

.child-3 {
    position: absolute;
    bottom: 0;
}

実行結果bottom: 0

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.parent { position: relative; }

.child-3 {
    position: absolute;
    left: 0;
}

実行結果left: 0

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.parent { position: relative; }

.child-3 {
    position: absolute;
    right: 0;
}

実行結果right: 0

parent

child-1

child-2

child-3

以下のようにすると、親要素の角に一致します。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.parent { position: relative; }

.child-3 {
    position: absolute;
    top: 0;
    left: 0;
}

実行結果左上角が一致

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.parent { position: relative; }

.child-3 {
    position: absolute;
    top: 0;
    right: 0;
}

実行結果右上角が一致

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.parent { position: relative; }

.child-3 {
    position: absolute;
    bottom: 0;
    left: 0;
}

実行結果左下角が一致

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.parent { position: relative; }

.child-3 {
    position: absolute;
    bottom: 0;
    right: 0;
}

実行結果右下角が一致

parent

child-1

child-2

child-3

包含(ほうがん)ブロック

上の例では直接の親要素.parentに対して絶対的な位置に移動しましたが、直接の親では無くても先祖要素であれば移動の基準(包含ブロック)に設定できます。

包含ブロックに設定するにはposition: relativeを指定します。(分かりにくい説明ですが。。。)

先祖関係のある<div>要素を準備します。

HTML


great-grandparent<br>
<div class="great-grandparent">
    grandparent<br>
    <div class="grandparent">
        parent<br>
        <div class="parent">
            <div class="child">child</div>
        </div>
    </div>
</div>

CSS


div {
    border: 3px solid blue;
    padding: 20px;
    display: inline-block;
}

.parent {
    min-height: 4rem;
    min-width:  6rem;
}

.child {
    border-color: red;
    background-color: rgba( 255, 0, 0, 0.3 );
    padding: 3px 7px;
}

実行結果初期状態

great-grandparent

grandparent

parent

child

.childクラスにposition: absolute、top: 0、right: 0を指定します。どの先祖要素にもposition: relativeを指定していない(＝包含ブロックが無い) ので、.great-grandparentの外に出てしまいます。

HTML


great-grandparent<br>
<div class="great-grandparent">
    grandparent<br>
    <div class="grandparent">
        parent<br>
        <div class="parent">
            <div class="child">child</div>
        </div>
    </div>
</div>

CSS


div {
    border: 3px solid blue;
    padding: 20px;
    display: inline-block;
}

.parent {
    min-height: 4rem;
    min-width:  6rem;
}

.child {
    border-color: red;
    background-color: rgba( 255, 0, 0, 0.3 );
    padding: 3px 7px;
}

CSS


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

実行結果包含ブロックが無い

great-grandparent

grandparent

parent

child

position: relativeを.great-grandparent、.grandparent、.parentに設定した例を示します。 position: relativeを指定した先祖要素が包含ブロックとなっていることが分かります。

HTML


great-grandparent<br>
<div class="great-grandparent">
    grandparent<br>
    <div class="grandparent">
        parent<br>
        <div class="parent">
            <div class="child">child</div>
        </div>
    </div>
</div>

CSS


div {
    border: 3px solid blue;
    padding: 20px;
    display: inline-block;
}

.parent {
    min-height: 4rem;
    min-width:  6rem;
}

.child {
    border-color: red;
    background-color: rgba( 255, 0, 0, 0.3 );
    padding: 3px 7px;
}

CSS


.great-grandparent {
    position: relative;
}

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

実行結果.great-grandparent

great-grandparent

grandparent

parent

child

HTML


great-grandparent<br>
<div class="great-grandparent">
    grandparent<br>
    <div class="grandparent">
        parent<br>
        <div class="parent">
            <div class="child">child</div>
        </div>
    </div>
</div>

CSS


div {
    border: 3px solid blue;
    padding: 20px;
    display: inline-block;
}

.parent {
    min-height: 4rem;
    min-width:  6rem;
}

.child {
    border-color: red;
    background-color: rgba( 255, 0, 0, 0.3 );
    padding: 3px 7px;
}

CSS


.grandparent {
    position: relative;
}

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

実行結果.grandparent

great-grandparent

grandparent

parent

child

HTML


great-grandparent<br>
<div class="great-grandparent">
    grandparent<br>
    <div class="grandparent">
        parent<br>
        <div class="parent">
            <div class="child">child</div>
        </div>
    </div>
</div>

CSS


div {
    border: 3px solid blue;
    padding: 20px;
    display: inline-block;
}

.parent {
    min-height: 4rem;
    min-width:  6rem;
}

.child {
    border-color: red;
    background-color: rgba( 255, 0, 0, 0.3 );
    padding: 3px 7px;
}

CSS


.parent {
    position: relative;
}

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

実行結果.parent

great-grandparent

grandparent

parent

child

なお、複数の先祖要素にposition: relativeを設定している場合、直近の先祖要素が包含ブロックになります。

以下の例では.great-grandparentと.parentの両方にposition: relativeを設定していますが、より近い先祖である.parentが優先されます。

HTML


great-grandparent<br>
<div class="great-grandparent">
    grandparent<br>
    <div class="grandparent">
        parent<br>
        <div class="parent">
            <div class="child">child</div>
        </div>
    </div>
</div>

CSS


div {
    border: 3px solid blue;
    padding: 20px;
    display: inline-block;
}

.parent {
    min-height: 4rem;
    min-width:  6rem;
}

.child {
    border-color: red;
    background-color: rgba( 255, 0, 0, 0.3 );
    padding: 3px 7px;
}

CSS


.great-grandparent,
.parent, {
    position: relative;
}

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

実行結果.parentが優先

great-grandparent

grandparent

parent

child

`: fixed`

position: fixedはブラウザに対して固定の位置に表示されます。

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color: purple;
    color: white;
    display: inline-block;
    padding: 5px;
    border-radius: 50%;
    font-size: 1rem;
    z-index: 100;
    opacity: 0.7;
}

実行結果初期状態

sample

.sampleクラスにposition: fixedとtopとrightプロパティを指定すると、要素はブラウザの右上に移動します。(下の実行結果の四角の中にあるべき要素がブラウザの右上に移動して固定されている、ということです。)

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color: purple;
    color: white;
    display: inline-block;
    padding: 5px;
    border-radius: 50%;
    font-size: 1rem;
    z-index: 100;
    opacity: 0.7;
}

CSS


.sample {
    position: fixed;
    top: 10px;
    right: 10px;
}

実行結果position: fixed

sample

`top`/`bottom`/`left`/`right`

top/bottom/left/rightの使い方は、設定する要素のpositionが何かによって変わります。

2つの設定値
`position`	`: relative`	`: absolute` `: fixed`
`top`	`: relative`	`: absolute`
`bottom`	`: relative`	`: absolute`
`left`	`: relative`	`: absolute`
`right`	`: relative`	`: absolute`

`position: relative`

親子関係のある<div>要素を準備し、子要素.childにposition: relativeを指定します。

子要素の中心が親要素の中心に来ることを確認してください。(position: absoluteの場合と異なります。)

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

実行結果初期状態

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
}

実行結果.child { position: relative; }

parent

child

移動させるには、これにtop/bottom/left/rightを指定しますが、感覚と逆の方に移動することに注意してください。

`top`

position: relativeでtopを指定すると下に移動します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    top: 2rem;
}

実行結果top: 2rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    top: 4rem;
}

実行結果top: 4rem

parent

child

`bottom`

position: relativeでbottomを指定すると上に移動します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    bottom: 2rem;
}

実行結果bottom: 2rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    bottom: 4rem;
}

実行結果bottom: 4rem

parent

child

`left`

position: relativeでleftを指定すると右に移動します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    left: 2rem;
}

実行結果left: 2rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    left: 4rem;
}

実行結果left: 4rem

parent

child

`right`

position: relativeでrightを指定すると左に移動します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    right: 2rem;
}

実行結果right: 2rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    right: 4rem;
}

実行結果right: 4rem

parent

child

斜めに移動

2つの設定値で斜めに移動できます。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    bottom: 2rem;
    right: 4rem;
}

実行結果左上に

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    bottom: 2rem;
    left: 4rem;
}

実行結果右上に

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    top: 2rem;
    left: 4rem;
}

実行結果右下に

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 3rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.child {
    position: relative;
    top: 2rem;
    right: 4rem;
}

実行結果左下に

parent

child

`position: absolute`

親子関係のある<div>要素を準備し、親要素.parentにposition: relativeを子要素.childにposition: absoluteを指定します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

実行結果初期状態

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
}

実行結果.child { position: absolute; }

parent

child

子要素の左上角が親要素の中心に来ていることに注意してください。 position: absoluteの場合はこれが最初の位置です。

参考までにposition: relativeの場合は子要素の中心が親要素の中心に来ます。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: relative;
}

実行結果.child { position: relative; }

parent

child

`top`

position: absoluteでtopを指定すると、子要素は親要素の上辺に移動します。

topに-1rem、0、1remを指定した場合の結果を示します。0の場合には上辺が接し、マイナス値にすると外側に、プラス値にすると内側に移動します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: -1rem;
}

実行結果top: -1rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
}

実行結果top: 0

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 1rem;
}

実行結果top: 1rem

parent

child

`bottom`

position: absoluteでbottomを指定すると、子要素は親要素の下辺に移動します。

bottomに-1rem、0、1remを指定した場合の結果を示します。0の場合には下辺が接し、マイナス値にすると外側に、プラス値にすると内側に移動します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    bottom: -1rem;
}

実行結果bottom: -1rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    bottom: 0;
}

実行結果bottom: 0

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    bottom: 1rem;
}

実行結果bottom: 1rem

parent

child

`left`

position: absoluteでleftを指定すると、子要素は親要素の左辺に移動します。

leftに-1rem、0、1remを指定した場合の結果を示します。0の場合には左辺が接し、マイナス値にすると外側に、プラス値にすると内側に移動します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    left: -1rem;
}

実行結果left: -1rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    left: 0;
}

実行結果left: 0

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    left: 1rem;
}

実行結果left: 1rem

parent

child

`right`

position: absoluteでrightを指定すると、子要素は親要素の右辺に移動します。

rightに-1rem、0、1remを指定した場合の結果を示します。0の場合には右辺が接し、マイナス値にすると外側に、プラス値にすると内側に移動します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    right: -1rem;
}

実行結果right: -1rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    right: 0;
}

実行結果right: 0

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    right: 1rem;
}

実行結果right: 1rem

parent

child

角に移動

2つの設定値で(親要素の)角に移動できます。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    left: 0;
}

実行結果top: 0 left: 0

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

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

実行結果top: 0 right: 0

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    bottom: 0;
    right: 0;
}

実行結果bottom: 0 right: 0

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    bottom: 0;
    left: 0;
}

実行結果bottom: 0 left: 0

parent

child

角から少しズラしたい場合には値を微調整します。

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 2rem;
    right: 0;
}

実行結果top: 2rem right: 0

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 2rem;
    right: 2rem;
}

実行結果top: 2rem right: 2rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    right: 2rem;
}

実行結果top: 0 right: 2rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: -2rem;
    right: 2rem;
}

実行結果top: -2rem right: 2rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: -2rem;
    right: 0;
}

実行結果top: -2rem right: 0

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: -2rem;
    right: -2rem;
}

実行結果top: -2rem right: -2rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    right: -2rem;
}

実行結果top: 0 right: -2rem

parent

child

HTML


parent<br>
<div class="parent">
    <div class="child">child</div>
</div>

CSS


.child {
    padding: 5px;
    border-color: purple;
    background-color: purple;
    color: white;
}

.parent {
    padding: 5rem 6rem;
    border-color: blue;
    background-image:  radial-gradient( blue, lightblue 7% );
}

div {
    border: 2px solid;
    display: inline-block;
}

CSS


.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 2rem;
    right: -2rem;
}

実行結果top: 2rem right: -2rem

parent

child

`position: fixed`

position: fixedはposition: absoluteとほぼ同じです。包含ブロック(position: relativeを指定した直近の先祖要素)に対して行っている設定を、ブラウザに対して行います。

`z-index`

z-indexプロパティで重なりの順番を指定できます。

position: relativeを設定して子要素を移動させて重ねます。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

実行結果初期状態

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.children { position: relative; }

.child-1 {
    right: 1rem;
    top: 2rem;
}

.child-2 {
    left: 2rem;
}

.child-3 {
    bottom: 2rem;
}

実行結果position: relative

parent

child-1

child-2

child-3

後に指定した要素ほど、重なりの上に来ます。 z-indexでこの順番を変えます。

z-indexのデフォルト値は0なので、0よりも大きい値を指定すると重なりの上になります。 .child-1に10、.child-2に20、.child-3に15、.child-3に30を順に設定した例を示します。

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.children { position: relative; }

.child-1 {
    right: 1rem;
    top: 2rem;
}

.child-2 {
    left: 2rem;
}

.child-3 {
    bottom: 2rem;
}

CSS


.child-1 { z-index: 10; }

実行結果.child-1 - 10

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.children { position: relative; }

.child-1 {
    right: 1rem;
    top: 2rem;
}

.child-2 {
    left: 2rem;
}

.child-3 {
    bottom: 2rem;
}

CSS


.child-1 { z-index: 10; }
.child-2 { z-index: 20; }

実行結果.child-2 - 20

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.children { position: relative; }

.child-1 {
    right: 1rem;
    top: 2rem;
}

.child-2 {
    left: 2rem;
}

.child-3 {
    bottom: 2rem;
}

CSS


.child-1 { z-index: 10; }
.child-2 { z-index: 20; }
.child-3 { z-index: 15; }

実行結果.child-3 - 15

parent

child-1

child-2

child-3

HTML


parent<br>
<div class="parent">
    <div class="children child-1">child-1</div>
    <div class="children child-2">child-2</div>
    <div class="children child-3">child-3</div>
</div>

CSS


div {
    border: 2px solid;      /* 境界線 */
}

/* --------- 親要素 --------- */
.parent {
    padding:      4rem;   /* 内側の余白 */
    border-color: orange;   /* 境界線の色 */
    display: inline-block;  /* インライン・ブロック要素 */
}

/* --------- 子要素 --------- */
.children {
    width:   5rem;          /* 幅 */
    height:  3rem;          /* 高さ */
    padding: 5px;
    opacity: 0.85;          /* 不透明度 */
}

.child-1 {
    background-color: #daa; /* 背景 */
    border-color:     #b88;
}

.child-2 {
    background-color: #ada;
    border-color:     #8b8;
}

.child-3 {
    background-color: #aad;
    border-color:     #88b;
}

CSS


.children { position: relative; }

.child-1 {
    right: 1rem;
    top: 2rem;
}

.child-2 {
    left: 2rem;
}

.child-3 {
    bottom: 2rem;
}

CSS


.child-1 { z-index: 10; }
.child-2 { z-index: 20; }
.child-3 { z-index: 30; }

実行結果.child-3 - 30

parent

child-1

child-2

child-3