position
positionプロパティを使うと、要素の位置を操作できます。
値:staticは初期値です。
値:relativeで、widthとheightを指定すると要素の位置がズレます。
値:fixedで、widthとheightを指定すると、ウインドウの左上からの位置に固定配置されます。
![](https://tumaboki.com/wp-content/uploads/2020/11/20c0a89a16c07ce4ff1daa33dda1485d.png)
![](https://tumaboki.com/wp-content/uploads/2020/11/c251f71e58bf682815dcc6b5e6dfae30.png)
要素の絶対配置
positionプロパティを使うと、要素の位置を操作できます。
値:absoluteで、要素の絶対配置ができます。
親要素が値:staticの場合は、ウインドウ左上から位置が指定されます。
親要素が値:relativeの場合は、親要素の左上から位置が指定されます。
親要素が値:static以外の場合、z-indexを使うと、重なり順序を操作できます。
![](https://tumaboki.com/wp-content/uploads/2020/11/575d660157dabe47144140db700ccaa0.png)
![](https://tumaboki.com/wp-content/uploads/2020/11/96a57b1b5dd8b965b86920ab53ddb7c4.png)
box-sizing
border-sizingプロパティを使うと、paddingやborderを含めたサイズ変更が容易になります。
値:border-boxを使うと、borderまで含めたwidthとheightが自動計算され配置されます。
![](https://tumaboki.com/wp-content/uploads/2020/11/67a54d2bd2f7ab92c30c59cb54bb8add.png)
![](https://tumaboki.com/wp-content/uploads/2020/11/47ce6bf21a678499611be67f022f976d.png)
コメント