css(12) position

position : html 요소가 위치를 결정하는 방식을 설정
 1. 정적 위치 지정 방식(static)
    - 모든 html 요소의 기본적 위치 지정 방식
 2. 상대 위치 지정 방식(relative)
    - 기본 위치(정적위치)를 기준으로 좌표를 사용해 위치를 이동시키는 속성
 3. 고정 위치 지정 방식(fixed)
    - 화면을 기준으로 위치를 지정하는 방식
      (웹 페이지가 스크롤되어도 고정된 위치에 요소를 둔다)
 4. 절대 위치 지정 방식(absolute)
    - 상위 요소를 기준으로 좌표를 사용하여 위치를 이동시키는 속성
      단 상위요소가 존재하지 않는다면 body를 기준으로 위치를 설정(relative와 비슷하게 움직인다)
    - 만약 부모요소가 static이라면 body를 기준으로 위치를 조정한다
    - 안정적으로 사용하기 위해서는 부모요소에 relative를 정의해서 쓰는 편이다
    - 넓이가 컨텐츠에 맞게 변화되는 형태로 변경되기 때문에 적절한 width를 다시 지정해야하며 다른요소가 먼저 위치              를 점유해도 덮어쓰게된다.(부유객체)
 5. z-index
    - 요소들이 겹쳐있을 경우 화면에 나타나는 순서를 정하는 속성
    - 큰 숫자를 지정할수록 화면에 전면 출력된다
    (position 속성이 static 이외인 속성들만 적용)

 ※ position 속성들의 특징 : 다른 요소가 먼저 위치를 점유해도 그 위로 요소를 덮어씌운다(static 제외)

 

 

.parent{
    width: 300px;
    height: 300px;
    background-color: crimson;
    position: relative;
    top: 100px;
    left: 500px;
}
.relative-box{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50px;
    left: 50px;
    background-color: slateblue;
    color: aliceblue;
    font-weight: 700;
    text-align: center;
    line-height: 150px;
}
img{
    display: inline-block;
    width: 250px;
    height: 250px;
    position: fixed;
    top: 50px;
    left:150px;
}

 

 

 

---

 

z-index 예시

 

div{
    width: 100px;
    height: 100px;
}
#box1{
    background-color: aqua;
}
#box2{
    width: 100px;
    height: 100px;
    left: 20px;
    top: 20px;
    position: absolute;
    background-color: rgb(47, 0, 255);
    z-index: 2;
}
#box3{
    width: 100px;
    height: 100px;
    left: 40px;
    top: 40px;
    position: absolute;
    background-color: yellow;
    z-index: 1;
}
#box4{
    width: 100px;
    height: 100px;
    left: 60px;
    top: 60px;
    position: absolute;
    background-color: palevioletred;
    z-index: 3
}