CSS
mozilla의 css 선언 제안순서
- display
- list-style
- position
- float
- clear
- width
- height
- margin
- padding
- border
- background
- color
- font
- text-decoration
- text-align
- vertical-align
- white-space
- other text
- content
position:absolute 와 relative의 다른점
absolute에서 style.right는 블럭의 오른쪽으로부터의 기준이고
relative에서의 style.right는 블럭의 왼쪽을 기준으로 음의 방향으로 움직인다. 즉 style.left를 - 방향으로 움직이는 것과 같다.
한 블럭에 relative속성을 가진 개체가 있으면 top정렬이 된다
absolute는 Canvas라 불리는 웹문서 전체영역에서 0,0의 좌표를 기준으로 포지션 값을 가지게되며,
Relative는 스스로가 하나의 Canvas가 되면서 그 안에 포함하는 absolute에 새로운 0,0의 기준을 제공합니다.
static 포지션과 비슷한 성질을 띄면서 자식요소에 영향을 주는 것이 relative입니다
다음 UI 개발자 블로그에서 발췌
http://blog.daum.net/uidev/
<html lang="ko">
<head>
<style type="text/css">
p {margin:20px 0 0 0}
div {border:1px solid gray;}
div.d1 {width:150px;height:100px;}
div.d2 {position:absolute;top:30px;left:30px;background-color:#ff8989;width:200px;height:150px;z-index:100} <!-- 핑크색box -->
div.d3 {position:relative;background-color:#fff589;width:150px;height:100px;z-index:1} <!-- 노란색box -->
</style>
</head>
<body>
<p>
<div class="d1">
<div class="d2">position:absolute</div>
</div>
<div class="d3">position:relative</div>
</p>
<p>
<div class="d1" style="position:relative">position:relative
<div class="d2">position:absolute</div>
</div>
<div class="d3">position:relative</div>
</p>
</body>
</html>
위의 결과를 보면 위의 p 는.. d1, d2, d3가 사이 좋게 잘 나오죠.. 하지만 아래 그림은 뭔가 어색합니다.
d2의 left, top을 d1의 종속을 받게 하기 위해 d1에 position:relative를 주게되면.. 위의 결과 처럼 d2가 d3의 밑으로 숨어 들어가 버리는 현상이 발생을 합니다.
css쪽을 살펴 보면 분명 d2의 z-index가 100이고 d3의 z-index가 1 임에도 불구하고 말이죠.. 참으로 알 수 없는 ie입니다.
하지만, d2를 감싸고 있는 d1의 z-index에 d3의 z-index값 보다 큰 값을 주게 되면 아래 결과 처럼 정상적으로 잘 표현이 된답니다.
결론은 ie는 특정 element가 absolute되어 z-index가 사용될경우 상위 parent element 의 z-index도 함께 고려를 해봐야 한다... 정도겠네요..
그럼 허접한.. tip 이었습니다.. 수고하세요~
History
Last edited on 07/27/2007 11:33 by 에반
Comments (0)