LogoMark.png

CSS/Position の変更点

#author("2019-07-05T02:25:14+00:00","default:inoue.ko","inoue.ko")
*CSS｜Position
~


CSS の position プロパティは、文書内での要素の配置方法を指定します。配置された要素の最終的な位置は、top, right, bottom, left の各プロパティによって決まります。これを使うと、ブラウザWindow上の特定の位置に要素を固定したり、任意のブロックを基準にして、その左上を原点とした座標で、要素の位置を指定することができます。
~

***Position の仕様
positionプロパティーが使える値は、以下のとおりです。

-relative：元の位置を基準に相対的な座標を使う場合
-absolute：親要素を基準に絶対的な座標を使う場合
-fixed：ブラウザ画面を基準とした絶対的な座標を使う場合
-sticky：ページのスクロールに際し、指定位置で fixed する
-static：デフォルトです。

一般に、top、bottom、left、rightというプロパティとセットで使います。
~


***position : relative
対象となるブロックに以下のように書きます。
 position:relative;
 top: Ypx;
 left: Xpx;

相対指定は「元の位置（何も指定しなかった場合に自動的に置かれる場所）に対する相対的なズレ」を指定するものですが、実際にはこれを単体で使うことはあまりありません。

~

***position : absolute
絶対指定は「親要素に対する相対的な位置」を指定するもので、単体で用いた場合、親要素が特定できずにうまく位置指定ができません。そこで、一般に位置の基準となる親要素に対して position:relative; を記述することで、それを位置の基準と定めます。

-位置の基準となる親要素（一般的には #container など）に以下を記載
 position:relative;
これで基準となる親要素の左上が原点（0,0）となります。

-位置を絶対指定したい要素に以下のように記載します。 
 position:absolute;
 top: Ypx;
 left: Xpx;
これで当該要素は、親要素の左上を原点とする（X,Y）の位置に左上端が固定されるかたちで表示されます。
　
-書き方の例
 #container{
     position:relative;
 }
 
 nav{
     position:absolute;
     top:200px;
     left:40px;
     width:640px;
     height:40px;
 }

この例では、containerの左上を原点（0,0）としたエリアの中に、
nav領域が（40,200）の位置を起点として、幅640px、高さ40pxのサイズで
固定的に表示されます。
~

***position : absolute を用いたサイトのロゴの配置例
サイトのロゴは、ページ内での位置が固定されるものなので、
以下のように ID を利用して書くと簡単です。

-html側の記述
 <a href="index.html">
    <img  id="logo" src="images/logo.png">
 </a>

-css側の記述
 [ 親要素のセレクタ ] {
   position:relative;
 　　　：
 }
 
 #logo {
    position:absolute;
    top: 40px;
    left:40px;
 }
~


***position: fixed の事例
これを使うとブラウザ画面上の特定の位置に要素を固定することができます。
スクロールしても特定の場所から動かないメニューバーやボタンを表示したい場合に便利です。

''html''
 <nav id="MenuButton">　・・・・　</nav>

''css''
 nav#MenuButton {
   position: fixed;
   top: 80px;
   right: 0px;
 }

~



***position: sticky の事例
例えば、このサイトでは、ヘッダー直下のメニュー（Navigation）の部分にこのスタイルが適用されています。上にスクロールすると、メニューだけがウィンドウトップに固定されるのがわかると思います。

以下、通常配置されたh1要素に対し、スクロールして最上部（top:0;）に到達したら、そこで固定するようにした事例です。

''html''
 <h1 id="Sticky">Sample Site</h1>

''css''
 h1#Sticky {
   position: sticky;
   top: 0;
 }

参考
-ブラウザ対応状況：https://caniuse.com/#search=sticky
-Sticky のデモ： http://html5-demos.appspot.com/static/css/sticky.html~

~
~