マンガでわかるホームページ作成

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

CSSのpositionの書き方を説明します。

positionでは下記の値を指定できます。

  • static…初期値・位置移動しない・解除
  • relative…自分基準の位置変更・absoluteの基準指定
  • absolute…親基準の位置変更
  • fixed…画面に固定
  • sticky…要素が画面外にスクロールされるときに画面上に留まらせる。

以下はpositionとセットで使用するCSSプロパティです。

  • left…左からの位置指定
  • top…上からの位置指定
  • right…右からの位置指定
  • bottom…下からの位置指定
  • z-index…重ね順の指定

static

position:staticを指定しても位置を変更できません。positionを解除したいときに使います。

例としてパソコン版で位置指定していた要素をスマホ版で解除するときに使います。

またはabsoluteの基準位置を変更・解除したいときに使います。

relative

position:relativeを指定すると自分の本来ある地点を基準に位置変更できます。

ただし親要素にpaddingなどあると自分の本来の位置がわかりづらいものです。

一般的に位置移動にはposition:absoluteを使います。そしてそのabsoluteの基準を決めるためにposition:relativeを使うことが多いです。

 

以下の例ではrelativeで自分の位置を基準に位置指定しています。

 

指定前

relative
<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)

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>

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

relativeは単体で指定しただけでは何も変化しません。

leftやtopを使って位置を指定しましょう。

absolute

positon:absoluteを指定すると親要素を基準に位置変更できます。

ただし、親にstatic以外のpositionが指定されている必要があります。親に指定されていない場合はさらにその親、その親とさかのぼっていきます。どこにもpositionが指定されていないときはbodyが基準になります。

またabsoluteを指定するとwidthが子要素に合わせて狭まります。子要素がないときは0pxになります。widthを指定しましょう。

 

例として装飾として使われます。

①指定前

他の要素A
absolute
他の要素B
<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指定後

他の要素A
absolute
他の要素B
<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)が子要素に合わせて最低限になっています。

③調整後

他の要素A
absolute
他の要素B
<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も指定しましょう。

absoluteの注意点として親要素に「overflow:hidden」が指定された状態で親要素の外に位置すると見えなくなります。

その他クセのある要素なので注意して使いましょう。

fixed

position:fixedを指定すると画面上に固定できます。

スクロールしてもずっと同じ位置にいます。

例とし上部のメニューバーや右下のトップへ戻るボタンとして使われます。

実装例は画面右下をご覧ください。

fixed
<style>
.fixed{
    position: fixed;/*コレ*/
    right: 10px;
    bottom: 10px;
    width: 100px;
    border: 1px solid #999;
    background: rgba(165, 230, 160,0.5);
    padding: 5px;
}
</style>
<div class="fixed">fixed</div>

absoluteと違い、親の指定は不要です。

常に画面にあるので邪魔にならない工夫などは必要でしょう。

特にスマホは画面が狭いので要注意です。

sticky

position:stickyを指定すると画面上からスクロールされ見えなくなる時に画面上に固定されます。

例としてサイドメニューを追従させたいときに使えます。

 

↓スクロールして確かめてみてください。

 

「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。  カムパネルラが手をあげました。それから四五人手をあげました。ジョバンニも手をあげようとして、急いでそのままやめました。たしかにあれがみんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはまるで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどんなこともよくわからないという気持ちがするのでした。
sticky
 ところが先生は早くもそれを見附みつけたのでした。 「ジョバンニさん。あなたはわかっているのでしょう。」  ジョバンニは勢いきおいよく立ちあがりましたが、立って見るともうはっきりとそれを答えることができないのでした。ザネリが前の席からふりかえって、ジョバンニを見てくすっとわらいました。ジョバンニはもうどぎまぎしてまっ赤になってしまいました。先生がまた云いました。 「大きな望遠鏡で銀河をよっく調べると銀河は大体何でしょう。」  やっぱり星だとジョバンニは思いましたがこんどもすぐに答えることができませんでした。  先生はしばらく困ったようすでしたが、眼めをカムパネルラの方へ向けて、 「ではカムパネルラさん。」と名指しました。するとあんなに元気に手をあげたカムパネルラが、やはりもじもじ立ち上ったままやはり答えができませんでした。  先生は意外なようにしばらくじっとカムパネルラを見ていましたが、急いで「では。よし。」と云いながら、自分で星図を指さしました。 「このぼんやりと白い銀河を大きないい望遠鏡で見ますと、もうたくさんの小さな星に見えるのです。ジョバンニさんそうでしょう。」
<style>
.sticky{
    position: sticky;/*コレ*/
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #999;
    background: #faf3dc;
    padding: 5px;
}
.wrap{
    width: 100%;
    height: 300px;
    overflow: scroll;
    border: 1px solid #CCC;
}
.scroll{
    background:#f2f2f2;
    padding: 10px;
}
</style>
<div class="wrap">
    <div class="scroll">テキスト</div>
    <div class="sticky">sticky</div>
    <div class="scroll">テキスト</div>
</div>

stickyはIEでは使えません。ただしjavascriptを使うことで近い表現ができます。

他にもstickyはクセがあるのでうまく動作しないときは下記の記事も参考にしてください。

left・top・right・bottom

位置を指定するときに使います。

下の赤い点が基準点です。top,leftを指定するとその数値分位置移動します。

absolute

より厳密に言うと上記の赤い点が基準というよりborderとpaddingの境目が基準です。

指定できる値

left・top・right・bottomには以下の値を指定できます。

  • 絶対指定…数字px(emなど)
  • 相対指定…数字%
  • マイナス指定… -数字
  • auto…指定の解除

絶対指定

pxやem等を指定できます。このときは横の指定も縦の指定も数値分同じだけ移動します。

left:15px

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

absolute

top:15px

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

absolute

right:15px

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

absolute

bottom:15px

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

absolute

相対指定

%で指定します。

left,rightの場合は(relativeなどを指定している)親のpaddingを含めた幅に対する割合となります。

top,bottomは(relativeなどを指定している)親のpaddingを含めた幅に対する割合となります。

left:15%

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

absolute

top:15%

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

absolute

right:15%

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

absolute

bottom:15%

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

absolute

マイナス指定

マイナス指定した場合、基準位置はそのまま移動する方向が逆になります。

left:-15px

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

absolute

top:-15px

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

absolute

right:-15px

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

absolute

bottom:-15px

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

absolute

auto

指定を解除するときに使います。

上下左右中央寄せする方法

position:absoluteを使うことで上下左右中央寄せができます。

方法を2つ紹介しますが、どちらも要素のwidth,heightが指定されている必要があります。

方法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」と指定することもできます。

z-index

重なり順を変更する際に指定します。

指定前

他の要素A
absolute
他の要素B

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

指定後

他の要素A
absolute
他の要素B

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

「z-index」はstatic以外のpositionが指定されていないと効きません。動かさない要素であっても「position:relative」を指定する必要があります。

「z-index」は初期値は「0」です。これより上にするには1以上の数値を指定します。単位は不要です。

「1、2、3、4…」と順に指定する必要はありません。「100,200,205,1000」のようにランダムに飛ばして指定もできます。

マイナスも利用できます。「z-index:0」の要素より下に表示させるために「z-index:-1」と指定することができます。

数値が同じときはhtmlが後に記載されている方が上になります。

 

z-indexが効かないときは下記記事を参考にしてみてください。

まとめ

positionの値

  • static…初期値・位置移動しない・解除
  • relative…自分基準の位置変更・absoluteの基準指定
  • absolute…親基準の位置変更
  • fixed…画面に固定
  • sticky…要素が画面外にスクロールされるときに画面上に留まらせる。

位置指定のCSSプロパティ

  • left…左からの位置指定
  • top…上からの位置指定
  • right…右からの位置指定
  • bottom…下からの位置指定

位置指定の値

  • 絶対指定…数字px(emなど)
  • 相対指定…数字%
  • マイナス指定… -数字
  • auto…指定の解除

z-index

  • 重なり順の指定
  • positionとセットで指定する。
  • マイナス使用可能
  • 数字が大きいほど上に表示する

以上、CSS positionの書き方でした。

関連記事