3.18 - POSITION

POSITION

겹치게 할 수 있음 - 3차원

 

absolute: 

absolute자체가 high element >> 기준이 전체 브라우저임

margin말고 바로 사방을 기준으로 위치를 줌

 

relative: 

silmilar w/ absolute but it moves according to parents element

>> following high element

 

fixed:

literally "fixed" on the page.

ex) it fixed on the page even when scroll goes down

 

 

페이지에 height, width: 200px로 준 3개의 박스가있다

특성대로 각각 하나의 block을 사용해서 아래로 떨어진다.

 

빨간색 박스에 position: absolute; 를 주고 left/top을 각 30px씩 줘봤다.

absolute가 high element이기 때문에 원래 설정을 다 무시하고 앞으로 나온다.

 

 

 

 

위와 같은 설정에 빨간 박스에 postion:relative; 

부모 element를 따라가서 원래 설정이 그대로 유지된 상태로 빨간 박스만 움직인다.

 

빨간 박스안에 새로운 div 를 넣고 100px 넓이를 부여한후 빨간 박스에는 relative, 새로운 박스에는 absolute랑 left/top 10px씩 부여했다.

html에서 이미 빨간 박스 안에 속해있기 때문에 absolute를 주든 relative를 주든 똑같은 값이 나옴

 

이런 css를 줘봤다

        #a{
            height: 200px;
            width: 200px;
            background: red;
            position: relative;
            left: 30px;
            top: 30px;
        }

        #a-2{
            height: 100px;
            width: 100px;
            background: green;
            position: absolute;
        }

1. a box(빨간색) 은 설정값에 따락서 다른 박스들 위로 올라갈 수는 있지만 원래 가지고 있던 넓이는 계속 빈칸으로 유지가 됨.

2. 초록 박스가 absolute이기 때문에 아래 b c박스의 설정을 무시하고 그 두개 위로 올라가 있음

high element 라서 빨간 박스 위로 올라가기는 했지만 relative가 유지하고 있는 속성은 무시하지 못함

>>high element라서 빨간 박스 위로 올라가는게 아니라 html순서가 하위에 있을 수록 위로 쌓인다고 함...

같은 속성으로 두고 html에서 초록색 박스를 a box위로 올리면 빨간 박스가 초록색 앞으로 나옴

>> 이러면 absolute가 high element인게 뭔 상관이야 

>>해결방법!! 여러 element가 position을 이용해서 뜨게 되었을때 순서를 정해줘야함.

                  그걸 위해 "z-index" 를 사용함!!

3. 초록박스가 absolute인데 왜 relative아래쪽에 있나..? 라고 생각 했는데 내가 margin(?)을 지정 안해줘서 그런거였음. So if i give px as setting value on green box(absolute) it ignores red box and goes up. Therefore it is 'possible' but i should give setting value to work on that way.

 

Fixed도 일단 화면에서 해당 면적이 띄워진다.

그리고 스크롤이 어떻게 움직이던 화면 자체에서 그대로 고정된다.

 

 

css

 

        #a{
            height: 200px;
            width: 200px;
            background: red;
            position: relative;
            left: 30px;
            top: 30px;
        }

        #a-2{
            height: 100px;
            width: 100px;
            background: green;
            position: fixed;
            left: 20px;
            top:20px;
        }

위와 똑같은 설정에서 초록색 박스에 position을 fixed로 바꾸고 좀 더 직관적으로 보기 위해서 left 와 top에 20px씩 줘서 화면에서 조금 띄워봤다.

+ 스크롤 내리려고 노란 박스에 height를 길게 줌.

스크롤 내리기 전에는 똑같음

내려보니까 초록색은 그대로 고정되있는게 보임