메뉴 로그인 검색

웹퍼블리셔 온.오프라인 교육센타

마크업기초교육입니다

HTML5강좌

HTML기초.중급.개념.용어강의

바로가기

CSS3강좌

CSS기초.중급.고급.개념.용어강의입니다

바로가기

jQuery강좌

jQuery기초.중급.개념.용어강의입니다

바로가기

개인교습.세미나신청


position : 위치

 

position은 컨텐츠의 위치를 지정하기 위해서 사용을 함.

 

margin으로도 컨텐츠의 위치를 지정할 수가 있다.

그런데 position을 사용하는 경우가 있는데 그것은 바로....

일정방향으로 배치(열)되지 않고 이탈되어 특정위치에

배치될 때는 position을 사용한다

 

이때 특정기준점에서 거리를 재서 left값과 top값을 지정하게 된다

position:absolute;(절대위치.특정기준점에서 측정된)

left:값;

top:값;

 

그리고 특정기준점역활을 할 대상(바로 위)에는

position:relative; 선언해주면 된다.

 

또한 position으로 위치지정한 대상은 다른 대상에게 영향을 안주고 안받는다.

margin으로 처리한 대상들은 서로의 간격을 밀어서 위치가 변동이

되는데 반해서...

TOTAL COMMENTS : 1

  • 2017/05/08

    자식요소를 position:absolute로 위치지정시
    부모의 높이가 줄어드는데
    부모에 overflow:hidden지정해도 높이가 늘어나지 않는다

    왼쪽,오른쪽등의 정렬시에는 float명령으로 위치지정하고
    부모에게는 overflow:hidden 지정한다.

    //position:relative는
      자기자신의 왼쪽상단모서리를 기준으로 위치지정이 된다
      position:relative;
      left:100px;
      top:100px;

     다른 요소에는 영향을 미치지 않는다...
     

이 게시물은 댓글을 달 수 없습니다.

LOGIN

SEARCH

MENU NAVIGATION