프론트에서 가장 중요하다시피한 position을 정리
구분을 명확히 하기위해 border와 margin을 설정하고 보여준다.
📌 static
결과
<!DOCTYPE html> <html> <head> <style> #a1, #a2, #a3, #a4 { border: 5px solid red; margin: 5px; } </style> </head> <body> <div id="a1">a1</div> <div id="a2"> a2 <div id="a3"> a3 <div id="a4">a4</div> </div> </div> </body> </html>
- html 요소들은 default로
position: static를 갖고있다.- static은 top, right, bottom, left 속성이 적용되지 않는다.
📌 relative
결과
<!DOCTYPE html> <html> <head> <style> #a1, #a2, #a3, #a4 { border: 5px solid red; margin: 5px; } #a4 { position: relative; left: 100px; top: 100px; } </style> </head> <body> <div id="a1">a1</div> <div id="a2"> a2 <div id="a3"> a3 <div id="a4">a4</div> </div> </div> </body> </html>
- a4의 부모 태그인 a3에서 위로 100px 왼쪽으로 100px만큼 상대적으로 떨어진 곳에 위치한다.
결과
<!DOCTYPE html> <html> <head> <style> #a1, #a2, #a3, #a4 { border: 5px solid red; margin: 5px; } #a1 { position: relative; border: 5px solid blue; left: 50px; top: 180px; } #a4 { position: relative; left: 100px; top: 100px; } </style> </head> <body> <div id="a1">a1</div> <div id="a2"> a2 <div id="a3"> a3 <div id="a4">a4</div> </div> </div> </body> </html>
- 위와같이 relative는 다른 요소와 겹쳐질 수 있기때문에 유의하여 사용해야 한다.
📌 absolute
결과
<!DOCTYPE html> <html> <head> <style> #a1, #a2, #a3, #a4 { border: 5px solid red; margin: 5px; } #a3 { position: relative; } #a4 { position: absolute; background-color: blue; color: white; left: 0; top: 0; } </style> </head> <body> <div id="a1">a1</div> <div id="a2"> a2 <div id="a3"> a3 <div id="a4">a4</div> </div> </div> </body> </html>
결과
<!DOCTYPE html> <html> <head> <style> #a1, #a2, #a3, #a4 { border: 5px solid red; margin: 5px; } #a4 { position: absolute; background-color: blue; color: white; left: 0; top: 0; } </style> </head> <body> <div id="a1">a1</div> <div id="a2"> a2 <div id="a3"> a3 <div id="a4">a4</div> </div> </div> </body> </html>
- 위와 두차이는 무엇일까?
absolute는 상위 부모 태그가 static인것을 무시하다 아닌 태그를 발견하면 해당 태그의 기준으로 위치를 지정한다.- absolute는 해당 content의 size만큼의 크기만 갖게된다.
- 부모에 속하지않기 때문에 a4가 a2, a3 안에 속해있지만 css를 상속받지 않는다. (별개로 생각하면된다.)
📌 fixed
결과
<!DOCTYPE html> <!DOCTYPE html> <html> <head> <style> #a1, #a2, #a3 { border: 5px solid red; height: 1000px; } #a4 { position: fixed; background-color: blue; color: white; left: 0; top: 0; width: 100px; height: 100px; } </style> </head> <body> <div id="a1">a1</div> <div id="a2"> a2 <div id="a3"> a3 <div id="a4">a4</div> </div> </div> </body> </html>
- fixed는 화면의 위치에 고정시켜 스크롤로부터 독립되게 하는 것이다. (스크롤해도 같은위치에 계속 존재)
- fixed도 absolute와 같이 해당 content의 size만큼의 크기만 갖게된다.
- fixed도 absolute와 같이 부모와 링크가 끊기게 된다.
## ✨ References
- https://opentutorials.org/course/2418/13414
코딩💻 고양이😺