htmlのタグを設置していて、どうしてもデザインどおりに設置できない時に役に立つのが、"position"のプロパティです。
画面の任意の座標に設置したり、画面に追従するページトップに戻るボタンや、ドラッグで表示の画像などを動かしたりする時は、このpositionプロパティを使用しています。
positionについて
このプロパティは、一言で説明すると、タグのどのように配置するかを設定する命令です。
プロパティの値は次のようなものがあります。
propertyで使える値と説明
static : 通常のHTMLタグ状態（何も設定しない場合はこの値になっています）
absolute : 絶対座標で、タグの位置を変更できます。
relative : 絶対座標の起点を設定できます。
fixed : 表示している画面の絶対座標が指定できます。
stick : 画面の上に張り付いているタブの様な効果が設定できます。
実際にサンプルを見て自分でコーディングしてみないと、なかなか理解するのが難しいと思うので、それぞれの値についてのデモを掲載しておきます。
デモ : static
staticは、通常の状態なので、設定しなくても大丈夫です。
<div class='demo-1'>
<div class='object-1'></div>
<div class='object-2'></div>
<div class='object-3'></div>
</div>
<style>
.demo-1{
white-space:normal;
width:100%;
height:auto;
border:1px solid black;
}
.demo-1 > *{
display:inline-block;
width:50px;
height:50px;
border:1px solid red;
margin:10px;
}
</style>
デモ : absolute
absoluteは、起点（通常はbodyやhtmlタグ）からの絶対座標が指定できます。
DOM構造では表現できない表示ができるようになります。
デモでは、上位タグの左上から、30px x 30pxの座標に、object-2を移動させています。
<div class='demo-2'>
<div class='object-1'></div>
<div class='object-2'></div>
<div class='object-3'></div>
</div>
<style>
.demo-2{
white-space:normal;
width:100%;
height:auto;
border:1px solid black;
position:relative;
}
.demo-2 > *{
display:inline-block;
width:50px;
height:50px;
border:1px solid red;
margin:10px;
}
.demo-2 .object-2{
position:absolute;
top:30px;
left:30px;
}
</style>
デモ : relative
relativeを設置すると、そのタグが起点になり、設置したタグを含めて、それ以下のタグが、起点を軸に座標指定をすることができるようになります。
特定のタグの中での座標指定ができると、インライン表現がやりやすくなるでしょう。
absoluteと同じ構造にしているので、表示のされ方の違いを理解しておきましょう。
<div class='demo-3'>
<div class='object-1'></div>
<div class='object-2'></div>
<div class='object-3'></div>
</div>
<style>
.demo-3{
white-space:normal;
width:100%;
height:auto;
border:1px solid black;
position:relative;
}
.demo-3 > *{
display:inline-block;
width:50px;
height:50px;
border:1px solid red;
margin:10px;
}
.demo-3 .object-2{
position:relative;
top:30px;
left:30px;
}
</style>
デモ : fixed
ページを表示した時から、画面左下に表示されている赤い物体です。
クリックすると、この項目に自動スクロールするようにしています。
<a class='demo-4' href='#demo_4'>デモ : fixed</a>
<style>
.demo-4{
padding:10px;
background-color:red;
color:white!important;
position:fixed;
bottom:30px;
left:30px;
cursor:ponter;
z-index:100;
}
</style>
<h2>デモ : sticky</h2>
<div class='demo-5'>
<div class='scroll'>
<div class='object-1'></div>
<div class='object-2'></div>
<div class='object-3'></div>
</div>
</div>
<style>
.demo-5{
white-space:normal;
width:100%;
height:100px;
overflow-y:scroll;
border:1px solid black;
position:relative;
}
.demo-5 > .scroll{
height:300px;
}
.demo-5 > .scroll > *{
display:inline-block;
width:50px;
height:50px;
border:1px solid red;
margin:10px;
}
.demo-5 .object-2{
position:sticky;
top:10px;
}
</style>
デモ : fixed
デモ : sticky
stickyは、スクロールと連動して、指定されたtop,right,bottom,leftで指定された値より小さくならないように座標を固定してくれる、少し特殊な動きをする命令です。
スマートフォンなどでたまに見かける方式なので、使いこなすことで、画面の使い勝手が良くなりますよ。
<div class='demo-5'>
<div class='scroll'>
<div class='object-1'></div>
<div class='object-2'></div>
<div class='object-3'></div>
</div>
</div>
<style>
.demo-5{
white-space:normal;
width:100%;
height:100px;
overflow-y:scroll;
border:1px solid black;
position:relative;
}
.demo-5 > .scroll{
height:300px;
}
.demo-5 > .scroll > *{
display:inline-block;
width:50px;
height:50px;
border:1px solid red;
margin:10px;
}
.demo-5 .object-2{
position:sticky;
top:10px;
}
</style>
0 件のコメント:
コメントを投稿