커뮤니티

고용노동부, 산업인력공단과 함께하는 강원도 유일한 기업중심 IT전문교육기관 ICT융합캠퍼스만의 특별한교육입니다.
공인 IT숙련기술인의 다양한 접근방법으로 전문가다운 실무교육을 받을 수 있습니다.

Category

교육강좌

클라이언트 CSS 사전 - position

페이지 정보

작성자 관리자 댓글 0건 조회 2,806회 작성일 20-07-20 09:29

본문

position

Summary

엘리먼트의 배치방법을 지정한다.

static | relative | absolute | fixed | inherit
기본값 static
적용대상 모든요소 (content속성으로 생성한 내용은 제외)
상속 상속안됨
퍼센테이지 지정불가
미디어 Visual

Value

  • static : 보통의 일반적인 배치가 적용된다. top, right, bottom, left 속성은 적용되지 않는다.
  • relative : 상대적인 위치에 배치된다. 즉 그 엘리먼트의 본래의 위치를 기준으로 배치된다. 위치는 top, right, bottom, left 속성에 의해 지정된다. 뒤에 계속되는 요소의 배치에 영향을 주지 않는다. [Sample]
  • absolute : 절대적인 위치에 배치된다. 즉 포함블럭의 네변을 기준으로 배치된다.  위치는 top, right, bottom, left 속성에 의해 지정된다. 뒤에 계속되는 요소의 배치에 영향을 주지 않는다. [sample]
  • fixed : 고정적인 위치에 배치된다. 브라우저의 스크롤에 의한 영역이동에 대해 고정된다. 또한 인쇄매체에 대해서도 각 페이지의 같은 위치에 인쇄된다. 위치는 top, right, bottom, left 속성에 의해 지정된다. 뒤에 계속되는 요소의 배치에 영향을 주지 않는다. [sample]

Tip

  1. 다음과 같이 사용될 수 있다.
    1
    2
    3
    4
    5
    div.wrap {
    position: relative;
    top:45px;
    left: 100px;
    }
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

답변목록

등록된 답변이 없습니다.