DAY 24 HTML & CSS 三周目 – LP模写- positionプロパティ 【ウェブカツ】

本日のプログラミング学習

HTML & CSS / 2hour

Aug / 46hour

Total / 71hour

 

通勤で読んでいる書籍

 

CSSーpositionの復習

模写をするにあたって、「自分の思った通りの場所に、要素を配置する」ということが非常に重要だと感じる。

改めて、positionプロパティを復習。

 

・そもそもpositionプロパティとは何か?

ボックス要素の位置を指定する際に使用するプロパティ。

(インライン要素には使用できない。インライン要素にも使用する場合にはdisplayでblockかinline-blockにする必要がある)

 

・種類は主に4種類

static=何も指定しないときはこれがデフォルトで選択されている。この値の時には、top/right/bottom/left、またz-index(要素の重なり)は適用されない。

relative=現在の位置を基準に、相対的な位置を指定する。「現在の位置」とはstaticを指定した位置を表す。

absolute=絶対的な位置を指定する。親要素にstatic以外の要素が指定されている場合には親要素の左上を基準に、親要素にstaticが指定されていない場合には、ウィンドウ全体の左上が基準となる。

fixed=絶対的な位置を指定するが、画面がスクロールされても位置は固定となる。

 

*上記のことから、absoluteを使用する場合はその親要素にrelativeを記述しないとダメ。

 

・位置はどうやって指定する?

top/right/bottom/leftで指定する。

top: 15px;

left: 15px;

と指定すると基準となる左上から、上から15px、左から15pxとして位置を指定する。

基本的には、「top or bottom」+「left or right」の二つの組み合わせで指定する。

 

・要素の重なりはz-indexで指定

z-index: 数字;

で指定することで、要素間の重なり順序を指定できる。

数字が大きいほど要素は上に表示される。

*指定する要素には、static以外の要素(主にrelativeとabsolute)を指定する必要がある。

 

コードサンプル

上記のコード結果

 

 

学習は全てウェブカツ!!というプログラミングスクールで学んでいます。

プログラミングスクール「ウェブカツ!!」

大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]

最新情報をチェックしよう!