配置

要素の配置方法を指定する

position:値
値にrelativeまたはabsoluteを指定する場合はtop,right,bottom,leftプロパティとセットで使う

値	説明
static	要素を標準の位置に配置する
relative	相対的な位置を指定する
absolute	絶対的な位置を指定する

top:　上位置を指定する
right:　右位置を指定する
bottom:　下位置を指定する
left:値　左位置を指定する

img{
    position:absolute;
    top:30px;
}

重ね合わせの順番を指定する

z-index:値
positionプロパティでrelativeまたはabsoluteを指定し要素同士が
重なって表示される場合に重ね合わせの順番を指定する
値には、1,2,3と整数を指定する。数値が大きいほどその要素は前面に表示される

img{
    position:absolute;
    top:30px;
    z-index:1;
}

ボックスからあふれた内容の処理を指定する

overflow:値　幅や高さを指定したボックスで内容が収まらない場合の処理を指定する

値	説明
visible	あふれた内容をはみ出した状態で表示する。ボックスのサイズは変わらない
hidden	あふれた内容は表示されない。ボックスのサイズは変わらない
scroll	スクロールバーが表示される。ボックスのサイズは変わらない
auto	自動でブラウザが判断する

.box1{
    border:ridge 4px;
    width:500px;
    height:200px;
    overflow:scroll;
}

要素の表示/非表示を指定する

visibility:値

値	説明
visible	要素を表示する
hidden	要素を非表示にする

.class1{
    visibility:hidden;
}

要素の表示形式を指定する

display:値

値	説明
block	インライン要素をブロックレベル要素にする。ブラウザで要素の前後が改行されて表示される
inline	ブロックレベル要素をインライン要素にします。ブラウザで要素の前後は改行されずに表示される
list-item	リスト項目にする
none	要素を非表示にする

p{
    display:inline;
}