Position attribute[static, relative, absolute, fixed]
[Source]
<![CDATA[
<style type="text/css">
#static1
{
width:100px;
height:100px;
background-color:green;
position:static;
}
#static2
{
width:100px;
height:100px;
background-color:yellow;
position:static;
}
#static3
{
width:100px;
height:100px;
background-color:red;
position:static;
}
#relative1
{
width:300px;
height:300px;
background-color:green;
position:relative;
top:0px;
left:100px;
}
#relative2
{
width:100px;
height:100px;
background-color:yellow;
position:relative;
top:0px;
left:100px;
}
#relative3
{
width:100px;
height:100px;
background-color:red;
position:relative;
top:0px;
left:200px;
}
#absolute1
{
width:100px;
height:100px;
background-color:green;
position:absolute;
}
#absolute2
{
width:100px;
height:100px;
background-color:yellow;
position:absolute;
top:0px;
left:100px;
}
#absolute3
{
width:100px;
height:100px;
background-color:red;
position:absolute;
top:0px;
left:200px;
}
#fixed1
{
width:100px;
height:100px;
background-color:green;
position:fixed;
}
#fixed2
{
width:100px;
height:100px;
background-color:yellow;
position:fixed;
top:0px;
left:100px;
}
#fixed3
{
width:100px;
height:100px;
background-color:red;
position:fixed;
top:0px;
left:300px;
}
</style>
<h1>Position attribute[static, relative, absolute, fixed]</h1>
<br />
<div><a class="more" onclick="this.innerHTML=(this.nextSibling.style.display=='none')?
'[Close]':'[Source]';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0);" onfocus="blur()">[Source]</a><div style="display: none;"> 11</div></div>
<br />
<h2>position:static</h2>
<p>초기값으로 위치를 지정하지 않을 때와 같다.</p>
<p>앞에서 설정된 position을 무시할 때 사용되기도 한다.</p>
<p>top, bottom, left, right 속성값이 적용되지 않는다.</p>
<div id="static1">
static1
</div>
<div id="static2">
static2
</div>
<div id="static3">
static3
</div>
<h2>position:relative</h2>
<p>위치 계산을 할 때 static의 원래 위치부터 계산한다.</p>
<p>top, bottom, left, right 속성값을 지정할 수 있으며 위치를 같이 설정할 수도 있다.</p>
<div id="static1">
static1
</div>
<div id="relative2">
relative2
</div>
<div id="relative3">
relative3
</div>
<h2>position:absolute</h2>
<p>relative와 달리 문서의 원래 위치와 상관없이 위치를 지정할 수 있다.</p>
<p>하지만 가장 가까운 상위 요소를기준으로 (단 static은 제외) 위치가 결정된다.</p>
<p>상위 요소가 없으면 위치는 html을 기준으로 설정된다. 지금 브라우저 좌측 상단에 있을 것이다</p>
<div id="static1">
static1</div>
<div id="absolute2">
absolute2
</div>
<div id="absolute3">
absolute3
</div>
<h3>static1, absolute2(top:0px left:100px), absolute3(top:0px left:200px)</h3>
<div id="relative1">
relative1
<div id="absolute2">
absolute2
</div>
<div id="absolute3">
absolute3
</div>
</div>
<h3>relative1(top:100px left:100px){ absolute2(top:0px left:100px), absolute3(top:0px left:200px)}</h3>
<p><br /></p>
<h2>position:fixed</h2>
<p>브라우저 화면의 상대 위치 이다.</p>
<p>따라서 화면이 바뀌더라도 고정된 위치를 설정할 수 있다.(상위 요소에 영향을 받지 않음)</p>
<h3>IE7,IE8 은 값이 적용되지 않으므로 문서 타입을 규정해 주어야 한다.</h3>
<div id="relative1">
static1
<div id="absolute2">
absolute2
</div>
<div id="fixed3">
fixed3
</div>
</div>
]]>
position:static
초기값으로 위치를 지정하지 않을 때와 같다.
앞에서 설정된 position을 무시할 때 사용되기도 한다.
top, bottom, left, right 속성값이 적용되지 않는다.
static1
static2
static3
position:relative
위치 계산을 할 때 static의 원래 위치부터 계산한다.
top, bottom, left, right 속성값을 지정할 수 있으며 위치를 같이 설정할 수도 있다.
static1
relative2
relative3
position:absolute
relative와 달리 문서의 원래 위치와 상관없이 위치를 지정할 수 있다.
하지만 가장 가까운 상위 요소를기준으로 (단 static은 제외) 위치가 결정된다.
상위 요소가 없으면 위치는 html을 기준으로 설정된다. 지금 브라우저 좌측 상단에 있을 것이다
static1
absolute2
absolute3
static1, absolute2(top:0px left:100px), absolute3(top:0px left:200px)
relative1
absolute2
absolute3
relative1(top:100px left:100px){ absolute2(top:0px left:100px), absolute3(top:0px left:200px)}
position:fixed
브라우저 화면의 상대 위치 이다.
따라서 화면이 바뀌더라도 고정된 위치를 설정할 수 있다.(상위 요소에 영향을 받지 않음)
IE7,IE8 은 값이 적용되지 않으므로 문서 타입을 규정해 주어야 한다.
댓글