CSS基礎5(position,display,overflow)

WEB基礎

position

効果は「座標をかえる」。コーディングをするときに、最後に書くといい。
移動させたときは、元居たエリアは、詰められずに空いてしまうことに注意!

ブロックレベル要素でも、position使うと座標の概念が発生するので幅100%ではなくなり、中身の持ってる幅に代わる。横幅いっぱいにしたければwidth:100%を記入する。

注意 更に、positionにすると、heightを%指定できる。

relative(相対位置)

相対位置への配置。positionプロパティでstatic(初期値)を指定した場合に表示される位置が基準位置となり、そこから上下左右の位置を指定。よって、positionとセットで必ず移動させる位置を記入する

#box01{
    position:relative;
    top:-50px;
    left:200px;
}

absolute(絶対位置)

基本はページの中のbodyから見た絶対位置の座標に置ける。

fixed(固定位置)

スクロールしても追従してくるメニューとか、バナーとか。フローティングボタンのこと。

重なり順の制御はZ座標で管理する。ベクトルのイメージは画面後ろから前。

z-index: 99;

入れ子の場合

親要素がpositionタグを使うと、その箱に対しての座標となる。

「position」の使い方基礎

display

UXの向上として、aタグにdisplay:block;書いて押せるエリアを広げる、なんて使い方もする。
さらに、margin&paddingを使うときは、blockにするのもあり!

display3種の違い

overflow

hidden:clear-fixのときに使うのがメジャーだが、本来は「はみ出した部分は表示しない」という意味。

scroll:横のスクロールバーも必要なくても出てしまうことが問題。

auto:最近はブラウザ依存もあまり出ないので、基本はコレ。はみ出した部分は縦スクロールがでる(ブラウザ依存)。

タイトルとURLをコピーしました