position Property

  • static(default) : static element는 위치가 지정된 것이 아니다. satic이 아닌 다른 값으로 지정된 element에 대해서만 위치가 지정되었다고 표현한다.
  • fixed : 간단하게 말해서, 페이지가 스크롤되더라도 늘 같은 곳에 위치한다.
  • relative : 별도의 Property를 지정하지 않는 이상 static과 똑같이 동작한다.
  • absolute : 가장 까다롭다. relative는 상위의 element를 기준으로 하여 top,bottom,left,right를 사용하여 위치를 지정할 수 있다. 같은 방법으로 위치 지정이 가능하지만, 기준이 되는 element가 기본적으로는 body가 된다. 하지만 상위에 relative element가 존재할 경우 그 element가 기준이 된다.

position: static;

아래 예시를 통해서도 알 수 있듯이, 값이 저장만 되고 화면에 반영되지는 않는다. 그래서 static의 경우 위치가 지정되었다고 할 수 없다.

position_static



<style>
    .square-static{
        position: static;
        width: 100px;
        height: 100px;
        border: solid #FFC700 8px;
        color: black;
    }
    #static{
        left:550px;
        border-color: #00575D;;
    }
</style>




<div class="square-static" >
    first
</div>




<div class="square-static" id="static">
    second
</div>


position: relative;

바로 상위의 element를 기준으로 위치를 지정한다.
position_relative_1



<div class="square-relative">


<style>
        .square-relative div{
            position: relative;
            width: 100px;
            height: 100px;
            border: solid darkred 8px  ;
            color: black;
            left:50px;
            top:10px;
        }
    </style>




<div id="a">
        FIRST
    </div>


</div>


position: absolute;

absolute element는 기본적으로 body를 기준으로 위치를 지정한다.
position_absolute_1



<div class="square-absolute1">


<style>
        .square-absolute1 div{
            position: absolute;
            width: 100px;
            height: 100px;
            border: solid darkred 8px  ;
            color: black;
            left:30px;
            top:30px;
        }


<div>
        FIRST
    </div>


</div>


하지만 다음과 같이 상위에 relative element가 존재할 경우 그 element를 기준으로 위치를 정한다.
position_absolute_2



<div class="square-absolute2">


<style>
        .square-absolute2{
            position: relative;
            width: 300px;
            height: 300px;
            border: solid #FFC700 8px  ;
            color: black;
            left:30px;
            top:30px;
        }
        .square-absolute2 div{
            position: absolute;
            width: 100px;
            height: 100px;
            border: solid darkred 8px  ;
            color: black;
            left:30px;
            top:30px;
        }


<div>
        FIRST
    </div>


</div>


COMMENTS:

1. static 속성을 이해하기 어려웠다. 개발자도구를 통해서 시각적으로 위치의 변화는 없지만 값은의 변화는 개발자 도구를 통해서 확인했다.
2. absolute 속성은 두가지만 기억하면 된다.(body/relative)
3. 각각의 속성은 어느 정도 이해가 되지만 아직 레이아웃을 효율적으로 짜는 데는 어려움이 있어서 연습이 필요하다.
4. CSS 효과를 주다가, 적용되는 우선순위가 존재하는 것다는 생각이 들었다.
(부모 element에 적용된 효과보다 스스로에게 적용된 효과가 먹혔다…) 이거 공부할 것

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s