스타일시트 레이어 관련 속성[z-index/position/top/bottom/right/left]

말자 전체게시물 작성일13-05-02 05:45 조회3,651회

본문

[z-index]

Netscape의 <LAYER>와 같은 개념이며, 위치에 따라 중첩된 결과를 보일 수 있고 position 속성과 함께 쓰입니다.
N:6.0/IE:4.0/CSS2


문법

HTML {z-index: Property}
JScript object.style.zIndex = 'Property'

Property

auto : 기본값, 현재의 문서내에서 생성된 박스는 그 모체의 박스와 같습니다.
숫자(정수) : 숫자가 높을수록 상위에 위치 합니다.

예제

<head>
<style type="text/css">
<!--
DIV#z1 {color: red; position: absolute; z-index: 1; bottom: 100; left: 100}
DIV#z2 {color: blue; position: absolute; z-index: 2; bottom: 90; left: 90}
DIV#z3 {color: green; position: absolute; z-index: 3; bottom: 80; left: 80}
-->
</style>
</head>

<input type=button onClick="z1.style.zIndex='3';z3.style.zIndex='1'" value="3 2 1">
<input type=button onClick="z1.style.zIndex='1';z3.style.zIndex='3'" value="1 2 3">
<div id=z1>■1</div>
<div id=z2>■2</div>
<div id=z3>■3</div>

absolute 결과를 출력할 수 없으니  예제 소스 복사후 확인 하세요!!
 

[position]

객체의 위치를 화면에 설정 합니다.
N:4.0/IE:4.0/CSS2


문법

HTML {position: Property}
JScript object.style.position = 'Property'

Property

static : 기본값, 기본적으로 설정 되는 값입니다. (top / left 적용 되지 않습니다.)
absolute(절대적) : 브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에 있다면 그 곳을 기준으로 합니다.
relative(상대적) : 객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를 기준으로 상대값을 정해 줍니다.
fixed : relative의 하위 범주에 속하며, 다른 점은 화면이 스크롤 되어도 움직이지 않습니다.

예제

<head>
<style type="text/css">
<!--
.pos1 {color: blue; position: absolute; top: 150; left: 300}
.pos2 {color: red; position: static}
.pos3 {color: green; position: relative; top: -10; left: 300}
-->
</style>
</head>
..........
<span class=pos1>■</span>
<span class=pos2>■</span>
<span class=pos3>■</span>
----------------------absolute(■)는 이곳을 기준으로 합니다.----------------------



빨간 박스는 static : 원 태그 위치에 그대로 보입니다.(position 미적용)
파란 박스는 absolute: 브라우저의 최 상단기준이나 문서내 최상단(파란 기준선)에서 top: 150; left: 300
그린 박스는 relative : 태그내 마지막 위치는 빨간 박스이므로 그곳을 기준으로 top: -10; left: 300

파란 박스는 여기서 absolute를 적용할 수 없어 위치가 다릅니다.
소스 복사해서 결과 확인 하세요!!

 

[top]

Position의 값에 따라서 브라우저 또는 상위 문단과 top이 쓰인 객체와의 거리(문서내 기준)
N:4.0/IE:4.0/CSS2


문법

HTML {top: Property}
JScript object.style.top = 'Property'

Property  top, right, bottom, left 모두 같습니다.

auto : 기본값, 디폴트 위치로서 브라우저에서 자동 설정 됩니다.
또한 숫자 단위로도 위치를 설정 할 수 있습니다.
절대적 단위 : cm, mm, in, pt, pc, px
상대적 단위 : em, ex
퍼센트(%) : 브라우저 높이를 기준으로 비례적으로 설정(상위 문단 존재시 그 높이를 기준)

예제

<head>
<style type="text/css">
<!--
DIV.st1 {color: red; position: absolute; top: 50px}
DIV.st2 {color: blue; position: relative; top: 50px}
DIV.st3 {color: green; position: relative; top: -25px}
-->
</style>
</head>

.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>
<div style="background-color: #CCCCCC">
position: relative인 경우 이 곳을(top) 기준으로 합니다.
</div> 
<div class=st1>■</div>
<div class=st2>■</div>
<div class=st3>■</div>
---------------------------------position: relative인 경우 이 곳을(top) 기준으로 합니다.



빨간 박스는 absolute : 브라우저나 문서 기준으로(프레임 사용시) 위쪽에서 50px
파란 박스는 relative : 상위 문단을 기준 즉, 기준선으로 부터 50px
그린 박스는 relative : 상위 문단을 기준 즉, 파란 박스의 높이(상단)로 부터 -25px

지금 보시면 빨간 박스 위치가 잘못 되었습니다. 여기서는 absolute가 적용되지 않으니소스 복사후 확인 하세요!!

[right]

Position의 값에 따라서 브라우저나 상위 문단을 기준으로 오른쪽에서의 거리(문서내 기준)
IE:5.0/CSS2


문법

HTML {right: Property}
JScript object.style.right = 'Property'

예제

<head>
<style type="text/css">
<!--
SPAN.st1 {color: red; position: absolute; right: 50px}
SPAN.st2 {color: blue; position: relative; right: -150px}
SPAN.st3 {color: green; position: relative; right: 0px}
-->
</style>
</head>

.<br>.<br>.<br>.<br>.<br>
<span class=st1>■</span>
|<span class=st2>■</span>|
<span class=st3>■</span>

<br>.<br>.<br>.<br>.<br>
<span class=st1>■</span>
|<span class=st2>■</span>|<b>랑스</b>
<span class=st3>■</span>

||

위에서 빨간 박스는 absolute : 브라우저나 문서 기준으로(프레임 사용시) 오른쪽에서 50px
파란 박스는 relative : 상위 문단을 기준 즉, || 기준으로 -150px
그린 박스는 relative : 상위 문단을 기준 즉, 파란 박스는 현 위치부터 || 까지 문단을 이루므로 || 다음을 기준으로 0px

|| 랑스

빨간 박스와 파란 박스는 위와 같고
그린 박스는 relative : 상위 문단을 기준 즉, 파란 박스는 현 위치부터 || 까지 문단을 이루므로 || 랑스 다음을 기준으로 0px

중요 한 것은 position: relative 일때는 right/left 둘다 기준(0px)은 문서의 왼쪽(||)이고 위치만 방향을 따릅니다.

빨간 박스 위치가 잘못 되었습니다. absolute가 적용 되지 않으니 소스 복사후 확인 하세요!!

 

[bottom]

Position의 값에 따라서 브라우저나 상위 문단을 기준으로 바닥으로 부터의 위쪽 거리(문서내 기준)
IE:5.0/CSS2


문법
HTML {bottom: Property}
JScript object.style.bottom = 'Property'
예제
<head>
<style type="text/css">
<!--
DIV.st1 {color: red; position: absolute; bottom: 400px}
DIV.st2 {color: blue; position: relative; bottom: 100px}
DIV.st3 {color: green; position: relative; bottom: -50px}
-->
</style>
</head>

.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>
<div style="background-color: #CCCCCC">
position: relative인 경우 이 곳을(bottom) 기준으로 합니다.
</div> 
<div class=st1>■</div>
<div class=st2>■</div>
<div class=st3>■</div>
<div align=center style="position: absolute; bottom: 0px; width:100%">    
------------------------------absolute(빨간 박스) 기준선-------------------------------
</div>
---------------------------------position: relative인 경우 이 곳을(bottom) 기준으로 합니다.
------------------------------absolute(빨간 박스) 기준선-------------------------------


빨간 박스는 absolute : 브라우저나 문서 기준으로(프레임 사용시) 아래쪽에서 400px
파란 박스는 relative : 상위 문단을 기준 즉, 기준선으로 부터 100px
그린 박스는 relative : 상위 문단을 기준 즉, 파란 박스의 바닥인 기준선 아래로 부터 -50px(예제 복사후 파란 박스 bottom: 0px로 하고 보시면 이해 됩니다.)

 

[left]

Position의 값에 따라서 브라우저나 상위 문단을 기준으로 왼쪽 에서의 거리(문서내 기준)
N:4.0/IE:4.0/CSS2


문법
HTML {left: Property}
JScript object.style.left = 'Property'
예제
<head>
<style type="text/css">
<!--
SPAN.st1 {color: red; position: absolute; left: 50px}
SPAN.st2 {color: blue; position: relative; left: 100px}
SPAN.st3 {color: green; position: relative; left: 100px}
-->
</style>
</head>

.<br>.<br>.<br>.<br>.<br>
<span class=st1>■</span>
|<span class=st2>■</span>|
<span class=st3>■</span>

<br>.<br>.<br>.<br>.<br>
<span class=st1>■</span>
|<span class=st2>■</span>|<b>랑스</b>
<span class=st3>■</span>

||

빨간 박스는 absolute : 브라우저나 문서 기준으로(프레임 사용시) 왼쪽에서 50px
파란 박스는 relative : 상위 문단을 기준 즉, || 기준으로 왼쪽에서 100px
그린 박스는 relative : 상위 문단을 기준 즉, 파란 박스는 현 위치부터 || 까지 문단을 이루므로 || 다음을 기준으로 0px

|| 랑스

빨간 박스와 파란 박스는 위와 같고
그린 박스는 relative : 상위 문단을 기준 즉, 파란 박스는 현 위치부터 || 까지 문단을 이루므로 || 랑스 다음을 기준으로 0px

중요 한 것은 position: relative 일때는 right/left 둘다 기준(0px)은 문서의 왼쪽(||)이고 위치만 방향을 따릅니다.

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 2 비추천 0

Css + Html

113개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 133 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 133 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 160 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 147 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 158 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 202 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 117 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 437 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 150 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 107 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 233 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1622 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1906 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1211 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 4727 추천: 15
게시물 검색