• 회원가입
  • 로그인
  • 구글아이디로 로그인

[position] CSS - top 속성 ★ - 기준상단 (= 위기준 상단거리 = top속성 = 탑속성/톱속성)

목차
  1. top 정의
  2. top 구문
  3. position:static 경우, top 효과
  4. position:absolute 경우, top 효과
  5. position:fixed 경우, top 효과
  6. position:relative 경우, top 효과

 

top 정의

 
해당 태그 요소의 위치를 상단을 기준으로 얼마나 밑에 위치시킬건지 지정.

(양수이면 상단 기준으로 아래 쪽에, 음수이면 상단 기준으로 위쪽에 위치.)

 


 
1. 
top 속성은 position 속성과 함께 사용하며, 
position 속성의 속성값이 static 일 땐 top 속성 적용 X
 
2. 
top 속성의 속성값이 동일해도, 
positon 속성의 속성값에 따라 위치 달라짐. (아래 예제 참고)
 
3.
세로축 기준 정중앙에 위치 시키기
 
4.
  • 기본값: auto
  • 상속여부: X
  • 애니효과: O
  • CSS버전: CSS2
  • JS구문: object.style.top="100px"
 
5.
모든 브라우저 지원.
 

 

top 구문

 
selector {top: auto|length|initial|inherit;} 

 


[속성값]
 
auto
상단 기준점에서 얼마나 밑에 위치시킬 건지 브라우저가 자동 결정.  (기본값)
 
length (예: px, cm 등 단위)
상단 기준점에서 지정 길이 만큼  내려 위치시킬건지 지정
  • 양수값: 상단 기준선 아래 위치
  • 음수값: 상단 기준선 에 위치
 
% 단위
상단 기준점에서 해당 요소의 몇 %만큼 밑에 위치시킬건지 지정
  • 양수값: 상단 기준선 아래 위치
  • 음수값: 상단 기준선 에 위치
 
initial
이 속성의 기본값으로 설정.

inherit
부모 요소 속성을 상속
 

 

position:static 경우, top 효과

문서 흐름인 p요소 열에 맞춰 위치, 이 경우 top, left 속성은 무시됨.
 
 
<style>
.parent {
    width: 720px;
    height: 1000px;
    margin: auto;
    border: 1px solid #b8064d;
    background-color: #f8e1eb;
    color:#b8064d;
    padding-left:10px
}
.child {
    width: 200px;
    border: 1px solid #b8064d;
    background-color: #f8e1eb;
    position: static;
    top: 100px;
    left: 100px;
    color:#b8064d;
    padding-left:10px
}
</style>
 
<div class="parent">
   <p>홈짱닷컴 (homzzang.com)</p>
   <div class="child">
       <p>홈페이지 무료 제작 강의</p>
   </div>
    <p>HTML CSS 무료 강의</p>
</div>
 

 

position:absolute 경우, top 효과

 
부모 요소인 브라우저 기준, top left 속성에 의해 상단 왼쪽 기준, 스크롤하면 위치 변동.
 
 
<style>
.parent {
    width: 720px;
    height: 1000px;
    margin: auto;
    border: 1px solid #b8064d;
    background-color: #f8e1eb;
    color:#b8064d;
    padding-left:10px
}
.child {
    width: 200px;
    border: 1px solid #b8064d;
    background-color: #f8e1eb;
    position: absolute;
    top: 100px;
    left: 100px;
    color:#b8064d;
    padding-left:10px
}
</style>
 
<div class="parent">
    <p>홈짱닷컴 (homzzang.com)</p>
    <div class="child">
        <p>홈페이지 무료 제작 강의</p>
    </div>
    <p>HTML CSS 무료 강의</p>
</div>

 


PS.
  1. position:absolute 경우, 부모요소가 static 외 속성값 갖는 position 속성 있으면 해당 부모 요소 기준.
  2. 부모나 조상 중 position:static 외의 속성값을 취하는 position 속성 없으면, window창 기준.
 

 

position:fixed 경우, top 효과


부모 요소 브라우저 기준, top left 속성에 의해 상단 왼쪽 기준, 스크롤 해도 위치 불변.

 
<style>
.parent {
    width: 720px;
    height: 1000px;
    margin: auto;
    border: 1px solid #b8064d;
    background-color: #f8e1eb;
    color:#b8064d;
    padding-left:10px
}
.child {
    width: 200px;
    border: 1px solid #b8064d;
    background-color: #f8e1eb;
    position: fixed;
    top: 100px;
    left: 100px;
    color:#b8064d;
    padding-left:10px
}
</style>
 
<div class="parent">
    <p>홈짱닷컴 (homzzang.com)</p>
    <div class="child">
        <p>홈페이지 무료 제작 강의</p>
    </div>
    <p>HTML CSS 무료 강의</p>
</div>

 


PS.
 
position:fixed 경우 부모 요소의 position 속성과 무관하게 window창 기준.
 

 

position:relative 경우, top 효과


해당 요소가 원래 있던 자리 기준, top left 속성에 의해 왼쪽 구석 기준.
 
<style>
.parent {
    width: 720px;
    height: 1000px;
    margin: auto;
    border: 1px solid #b8064d;
    background-color: #f8e1eb;
    color:#b8064d;
    padding-left:10px
}
.child {
    width: 200px;
    border: 1px solid #b8064d;
    background-color: #f8e1eb;
    position: relative;
    top: 100px;
    left: 100px;
    color:#b8064d;
    padding-left:10px
}
</style>
 
<div class="parent">
    <p>홈짱닷컴 (homzzang.com)</p>
    <div class="child">
        <p>홈페이지 무료 제작 강의</p>
    </div>
    <p>HTML CSS 무료 강의</p>
</div>
 

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
box CSS - padding 속성 ★ - 안쪽여백 (= padding속성 = 패딩속성)
box CSS - padding-top 속성 - 안쪽여백상단 (= padding-top속성 = 패딩탑속성 = 패딩톱…
box CSS - padding-right 속성 - 안쪽여백우측 (= padding-right속성 = 패딩라이트속…
box CSS - padding-bottom 속성 - 안쪽여백하단 (= padding-bottom속성 = 패딩바텀속…
box CSS - padding-left 속성 - 안쪽여백좌측 (= padding-left속성 = 패딩레프트속성)
position CSS - float 속성 ★★★ - 요소나란히 (= 요소한줄로 = 요소가로로 = 요소옆으로 = float속…
position CSS - clear 속성 ★ - float 해제후 줄바꿈 (= 클리어속성, clear속성, 상속 X)
position CSS - display 속성 ★★★★★ - 요소유형지정 (= 요소성격변 = 요소노출방식 = display속…
position CSS - position 속성 ★★★ - 위치기준대상지정 (= 위치속성 = 포지션속성 = 위치조정 = po…
position CSS - top 속성 ★ - 기준상단 (= 위기준 상단거리 = top속성 = 탑속성/톱속성)
position CSS - right 속성 ★ - 오른쪽기준(= 우측기준) 위치 지정 (= right속성 = 라이트속성) ※…
position CSS - bottom 속성 ★ - 기준하단 (= bottom속성 = 하단기준 = 아래기준 = 바텀속성 = …
position CSS - left 속성 ★ - 왼쪽기준 (= left속성 = 좌측기준 = 레프트속성, 상속 X)
position CSS - z-index 속성 ★ - 요소층수지정 (= 요소상하지정 = 요소상하결정 = 위아래지정 = z-…
position CSS - visibility 속성 ★ - 보임설정 (= 노출설정 = visibility속성 = 비저빌러티속…
position CSS - overflow 속성 ★★ - 범위이탈요소처리 (= 범위넘는요소처리 = 스크롤바 생성 = over…
position CSS - clip 속성 (폐기예고) - 이미지 자르기 (= 일부만 노출 = clip속성 = 클립속성)
css CSS - cursor 속성 - 커서 모양 (= cursor속성 = 커서속성)
intro CSS - !important 키워드 - 당해 속성값 강제 우선적용 (= 우선순위표시 = 느낌표임포턴트)
css CSS - opacity 속성 - 불투명도 (= opacity속성 = 오패서티속성/오페서티속성) ※ 있는데 …
6/25
목록
찾아주셔서 감사합니다. Since 2012