CSS positionの書き方【実装例・デモとあわせて紹介】

指定前

<style>
.relative{
    border: 1px solid #999;
    background: rgba(255, 116, 116, 0.5);
    padding: 5px;
}
.kijun{
    width: 90%;
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 15px;
}
</style>
<div class="kijun">
    <div class="relative">relative</div>
</div>

指定後（relative）

<style>
.relative{
    position: relative;/*コレ*/
    left: 10px;/*コレ*/
    top: 10px;/*コレ*/
    border: 1px solid #999;
    background: rgba(255, 116, 116, 0.5);
    padding: 5px;
}
.kijun{
    width: 90%;
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 15px;
}
</style>
<div class="kijun">
     <div class="relative">relative</div>
</div>

※点線部分は要素の本来の位置のイメージです。実際は表示されません。

①指定前

<style>
.absolute0{
    border: 1px solid #999;
    background: #a0c6e6;
    padding: 5px;
}
.kijun{
    width: 90%;
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 15px;
}
</style>
<div class="kijun">
    <div>他の要素A</div>
    <div class="absolute0">absolute</div>
    <div>他の要素B</div>
</div>

指定前はablolute要素は他の要素ABに挟まれています。

②absolute指定後

<style>
.absolute1{
    position: absolute;/*コレ*/
    border: 1px solid #999;
    background: #a0c6e6;
    padding: 5px;
}
.kijun{
    width: 90%;
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 15px;
}
</style>
<div class="kijun">
    <div>他の要素A</div>
    <div class="absolute1">absolute</div>
    <div>他の要素B</div>
</div>

absoluteを指定すると高さと幅がなくなったような状態になります。

「他の要素B」が消えたように見えますが、実際は「absolute」の下にあります。

absoluteの横幅（width）が子要素に合わせて最低限になっています。

③調整後

<style>
.absolute2{
    position: absolute;
    right: 10px;/*コレ*/
    top: 20px;/*コレ*/
    width: 100px;/*コレ*/
    border: 1px solid #999;
    background: #a0c6e6;
    padding: 5px;
}
.kijun{
    position: relative;/*コレ*/
    width: 90%;
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 15px;
}
</style>
<div class="kijun">
    <div>他の要素A</div>
    <div class="absolute2">absolute</div>
    <div>他の要素B</div>
</div>

topとrightで位置を指定しています。

親要素に「position: relative」を指定します。

widthも指定しましょう。

left:15px

左端を基準に15px右へ移動する

top:15px

上端を基準に15px下へ移動する

right:15px

右端を基準に15px左へ移動する

bottom:15px

下端を基準に15px上へ移動する

left:15%

左端を基準に横幅の15％右へ移動する

top:15%

上端を基準に縦幅の15％下へ移動する

right:15%

右端を基準に横幅の15％左へ移動する

bottom:15%

下端を基準に縦幅の15％上へ移動する

left:-15px

左端を基準に15px左へ移動する

top:-15px

上端を基準に15px上へ移動する

right:-15px

右端を基準に15px右へ移動する

bottom:-15px

下端を基準に15px下へ移動する

方法1

leftとtopを下記のように指定します。

left:calc(50% - 要素の横幅の半分);
top:calc(50% - 要素の縦幅の半分);

<style>
.kijun4{
    position: relative;
    border: 1px solid #333;
    width: 100%;
    height: 100px;
    background: #5a7ee0;
}
.absolute4{
    position: absolute;
    left: calc(50% - 25px);/*コレ*/
    top: calc(50% - 25px);/*コレ*/
    width: 50px;/*この半分*/
    height: 50px;/*この半分*/
    background: #FFF;
}
</style>
<div class="kijun4">
    <div class="absolute4"></div>
</div>

left:50%;top:50%で中央に寄せます。それだけだと要素の左上が中央に寄っただけであるため、要素の縦横半分分引き算しています。

方法2

以下を指定します。

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

<style>
.kijun5{
    position: relative;
    border: 1px solid #333;
    width: 100%;
    height: 100px;
    background: #5a7ee0;
}
.absolute5{
    position: absolute;
    left: 0;/*コレ*/
    right: 0;/*コレ*/
    top: 0;/*コレ*/
    bottom: 0;/*コレ*/
    margin: auto;/*コレ*/
    width: 50px;
    height: 50px;
    background: #FFF;
}
</style>
<div class="kijun5">
    <div class="absolute5"></div>
</div>

left,right・top,bottomをそれぞれ同じ数値にします。ただし、「真ん中より右に100pxずらしたい」ときは「left:100px」と指定することもできます。

指定前

absoluteを指定した要素が上になっています。

指定後

「他の要素A」に「style="position: relative; z-index: 1;"」を追加しました。