항상 쓸때마다 헷갈려서 확실하게 정리해두려고 한다. 나는 무언가를 배울때마다 그 단어의 의미를 이해하려고 노력한다.
(참고로 썸네일은 아무관련없다. 그냥 구글에 absolute 검색하니 저 보드카가 많이 나와서 골라봤다.)
relative는 내 주변에 있는 다른 요소와 지금 나의 위치를 파악하고 지금 내가 존재하는 곳에서 움직인다.
반면 absolute는 다른 요소를 무시한다. 다른 요소도 나를 무시한다. 내가 공중에 존재한다고 보면된다. 그래서 다른요소가 내가 없다고 생각하고 내 위치에 오면서 빈자리를 채우는 것이다.
그러나 absolute일때 내 부모가 static이 아닌경우는 부모의 위치가 기준이 되어 움직인다. 각설하고 코드로 보자
relative
<body>
<div id="first">first</div>
<div id="second">second</div>
<div id="third">
<span>third</span>
<div id="fourth">fourth</div>
</div>
</body> body {
margin: 0;
}
#first {
height: 5rem;
width: 5rem;
border: 1px solid red;
margin-bottom: 1rem;
}
#second {
height: 5rem;
width: 5rem;
border: 1px solid blue;
margin-bottom: 1rem;
}
#third {
height: 5rem;
width: 5rem;
border: 1px solid green;
margin-bottom: 1rem;
}
#fourth {
height: 5rem;
width: 5rem;
border: 1px solid blueviolet;
}요런식으로 되어있다. 참고로 third안에 fourth가 있다. fourth의 부모가 third인것이다.
이때 second만 relative를 줘보겠다.
#second {
position:relative;
height: 5rem;
width: 5rem;
border: 1px solid blue;
margin-bottom: 1rem;
}
변화는 없다. 왜냐면 relative는 내가 공중으로 사라지는것이 아니라 내가 지금 여기 서있는 곳에 있는데 이 서있는곳 기준으로 움직일것이라는 것을 선언한것이다. 그럼 왼쪽에서 1rem, 위에서 1rem 움직여 보겠다.
#second {
top: 1rem;
left: 1rem;
position:relative;
height: 5rem;
width: 5rem;
border: 1px solid blue;
margin-bottom: 1rem;
}
absolute
그럼 이제 second를 absolute로 만들어보겠다.
#second {
position: absoulte;
height: 5rem;
width: 5rem;
border: 1px solid blue;
margin-bottom: 1rem;
}
그렇다 second는 공중으로 떠났다. 그리고 그 자리를 third 상자가 메웠다. 그럼 second를 위에와 똑같이 움직여 보겠다.
#second {
position: absoulte;
top:1rem;
left:1rem;
height: 5rem;
width: 5rem;
border: 1px solid blue;
margin-bottom: 1rem;
}
second의 부모는 body이다 그래서 body기준으로 움직였다.
** 참고로 absolute일때는 width 가 100%되는 block태그의 속성이 사라져버린다.
부모가 있을때
그럼 다시 모든것을 복귀하고 fourth를 relatve를 주고 움직여 보겠다.
#fourth {
position: relative;
top: 1rem;
left: 1rem;
height: 5rem;
width: 5rem;
border: 1px solid blueviolet;
}
자기 위치 기준으로 움직였다. 그럼 absolute를 주고 움직여보자.
#fourth {
position: absolute;
top: 1rem;
left: 1rem;
height: 5rem;
width: 5rem;
border: 1px solid blueviolet;
}
왜이럴까? 부모, 즉 third가 static이라서 그렇다.
그럼 third에 absolute를 줘보자.
그럼 부모를 기준으로 다시 움직인다. third에 relative를 줘도 마찬가지이다.
굉장히 간단하다. 쉽다. 그러나 이때까지 주먹구구식으로 써왔다. 애매하게 알면 나중에라도 확실하게 배워두자!!
