Samla's Study

 

1. relative position

• "position" 속성 기본값 : static - 원래 있어야 할 위치에 있는 것
• relative 값 : 주변 요소들을 밀어내지 않고 (margin은 주변요소를 밀어냄) static값 상태를 기준으로 요소위치가 변경 가능.
• 개인적으로 마우스 오버시 글자가 문단에서 입체적으로 튀어나오게 하는 효과를 줄 때 사용하고 싶음.

<style>

div {
	border: 3px;
}

/* "static" 값에서의 요소 여백 설정 */
b {
	background-color: yellow;
	margin-top: 30px;
	margin-left: 50px;
}

/* "reative" 값에서 요소 위치 설정 */
i {
	background-color: orange;
	position: relative;
    top : 30px;
    left: 50px;   
}

</style>


<div>
	<p>1. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 <b>무궁화</b> 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세<p>

	<p>2. 남산 위에 저 소나무 철갑을 두른 듯 바람 서리 불변함은 우리 기상일세 <i>무궁화</i> 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세<p>

</div>

 

2. Fixed Position

• "relative"는 원래 위치 기준으로 위치 지정 -> "fixed"는 브라우저를 기준으로 위치 지정 (스크롤을 움직여도 항상 그 자리에 있음)
• "relative"는 원래 있던 자리가 그대로 비어있음 -> "fixed"는 원래 있던 자리가 뒷 요소로 채워짐.
• 네비게이션바 용도로 자주 사용됨.

<style>

div {
	border: 3px;
}

/* "reative" 값에서 요소 위치 설정 */
b {
	background-color: orange;
	position: relative;
    top : 30px;
    left: 50px;   
}

/* "fixed" 값에서 요소 위치 설정 */
i {
	background-color: yellow;
    position: fixed;
	top: 30px;
	mleft: 50px;
}
</style>


<div>
	<p>1. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 <b>무궁화</b> 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세<p>

	<p>2. 남산 위에 저 소나무 철갑을 두른 듯 바람 서리 불변함은 우리 기상일세 <i>무궁화</i> 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세<p>

</div>

 

3. Absolute Positon

• 포지셔닝이된 [relative, fixed, absoulte 상태의] 요소 기준으로 위치 설정
  (포지셔닝이 되지 않은 - "static" 상태의 - 요소는 무시)

<style>
/* 포지셔닝이 설정된 가장 가까운 조상 요소 */
#pink {
	width: 700px;
    height: 700px;
    position: relative;
}

/* 가장 가까운 조상 요소지만 포지셔닝이 되어 있지 않아 무시 */
#yellow {
	width: 300px;
    height: 300px;
}

/* "absolute" 값이 설정된 요소 */
#purple {
	width: 100px;
    height: 100px;
    position: absolute;
    top: 30px;
    right: 15px;
}


</style>

<div id="pink">
PINK

	<div id="yellow">
    YELLOW
    
    	<div id="purple">
        PURPLE
        </div>
        
    </div>
    
</div>