CSS : position

 

CSS : position 

---

• position은 문서상의 요소를 배치하는 방법을 정하는 태그이다.
• positon으로 요소의 배치 방법을 정하면 top, right, bottom, left로 최종 위치를 정한다.
  • top : 위에서 어느 정도 떨어질 것인가
  • right : 오른쪽에서 어느 정도 떨어질 것인가
  • bottom : 바닥에서 어느 정도 떨어질 것인가
  • left : 왼쪽에서 어느 정도 떨어질 것인가

---

 

 

 

---

 

position  :  Static 

---

• 기본값이며, position을 적용하지 않았을 때와 동일하다.

 

 

            #aaa {
                width: 100px;
                height: 100px;
                background-color: red;
                position: static;
            }
            #bbb {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

 

 

 

---

position : relative

---

• 요소를 일반적인 흐름에 따라 배치하되, 상하좌우 위치값에 따라 오프셋을 적용한다.
  오프셋이란, 위치를 얼마간 이동시키는 것을 의미한다.
• 만약 다른 요소가 추가되더라도 해당 요소는 흐름에 맞게  위치해 있다.

 

 

 

            #aaa {
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                top: 50px;
                left: 20px;
            }
            #bbb {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

 

 

 

---

 

position : absolute

---

• absolute는 해당 요소를 일반적인 흐름에서 제거하고, 상위 요소중 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다. (상위 요소에 position이 적용된 요소가 있다면 그 요소를 기준으로 오프셋이 지정된다.)
• 만약, 상위요소에 position이 지정된 요소가 없을 경우 브라우저를 기준으로 오프셋이 된다. 
• 아래의 예시를 보면 aaa(빨간색)는 상위 position 요소가 없기때문에 브라우저를 기준으로 오프셋이 되었고 bbb(주황색)은 aaa (빨간색)을 기준으로 오프셋이 되었다. 

 

 

 

 

 

둘다 상위 position이 없을경우 ▼ (둘다 브라우저를 기준으로 오프셋이 되었다.)

 

            #aaa {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                top: 10px;
                left: 10px;
            }
            #bbb {
                width: 100px;
                height: 100px;
                background-color: orange;
                position: absolute;
                top: 20px;
                left: 50px;
            }

 

 

 

---

 

position : fixed

---

• 요소를 일반적인 문서 흐름에서 제거하고, 고정된 위치에 고정시킨다.
• 아래예제는 fixed를 bottom : 5px 에 위치 시켰다.

 

 

            #aaa {
                width: 100px;
                height: 100px;
                background-color: red;
                position: fixed;
                bottom: 5px;
            }
            #bbb {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

 

 

 

---