레이어 관련 속성 [position, overflow, clip, visibility, z-index] 적용 style 태그

사용예

position

static(기본)

여기는<span style="position:static">콩나물대제국</span>입니다.

absolute(절대적)

여기는<span style="position:absolute; top:390; left: 700; background-color:red; width:100;">콩나물대제국</span>입니다.

relative(상대적)

여기는<span style="position:relative; top:10; left: 10; background-color:green;">콩나물대제국</span>입니다.

여기는<span style="position:relative; background-color:yellow; top:10;">콩나물대제국</span>입니다.

여기는<span style="position:relative; background-color:yellow; left:10;">콩나물대제국</span>입니다.

여기는<span style="position:relative; background-color:yellow; right:10;">콩나물대제국</span>입니다.

여기는<span style="position:relative; background-color:yellow; bottom:10;">콩나물대제국</span>입니다.

영역폭<span style="width:150px; background-color:olive;">콩나물대제국</span>

영역높이<span style="height:30px; background-color:olive;">콩나물대제국</span>

<span style="overflow: visible; width:100px; height: 100px; border: 1px solid blue;">영역의 폭보다

긴 문장이 오게 되면

영역을 늘여 다 보여준다.</span>

긴 문장이 오게 되면

영역을 늘여 다 보여준다.

<span style="overflow: hidden; width:100px; height: 100px; border: 1px solid blue;">영역의 폭보다

긴 문장이 오게 되어도

영역안에만 보여준다.</span>

긴 문장이 오게 되어도

영역안에만 보여준다.

<span style="overflow: auto; width:100px; height: 100px; border: 1px solid blue;">영역의 폭보다

긴 문장이 오게 되면

자동으로 스크롤이 되게 한다.</span>

긴 문장이 오게 되면

자동으로 스크롤이 되게 한다.

<span style="overflow: scroll; width:100px; height: 100px; border: 1px solid blue;">>영역의 폭과

관계없이

스크롤을 보여준다.</span>

관계없이

스크롤을 보여준다.

<img src="3.jpg" style="position:absolute; top:-100; left:-100; clip:rect(100 200 200 100)">

※ rect(top right bottom left)
※ iframe 사용됨...

여기와<span style="visibility: visible;">Visibility</span>여기사이

<img src="c.gif" style="position: absolute; z-index: 1; bottom: 100; left: 100;">
<img src="c.gif" style="position: absolute; z-index: 1; bottom: 125; left: 125;">
<img src="c.gif" style="position: absolute; z-index: 1; bottom: 150; left: 150;">

※ iframe 사용됨...