두 div의 중첩 효과, 상단 투명

 
dddddddddddddddddddddddddd

설명:position:relative;상대 포지셔닝
position:absolute; 절대 포지셔닝
z-index:1; 겹쳐서 놓는 순서는 하나이다
filter:alpha(opacity=50); div의 투명도 50%는 IE에 적합
opacity:0.6; div의 투명도는 FF 1.5에도 적용되고 -moz-opacity=0.6도 지원한다.div의 투명도는moz+f에 적용
효과:bottom right top z-index left
position 버전: CSS 2 호환성: IE4+ NS4+ 계승성: 없음
구문:
　　position : static | absolute | fixed | relative
수치:
static: 기본값입니다.특별한 위치 지정이 없으며 객체는 HTML 위치 지정 규칙을 따릅니다.
absolute: 대상을 문서 흐름에서 끌어내고left,right,top,bottom 등 속성을 사용하여 가장 가까운 위치 설정이 있는 부모 대상에 대해 절대적으로 위치를 정합니다.이러한 부모 대상이 존재하지 않으면 바디 대상에 근거한다.그리고 그 층첩은 z-index 속성 정의를 통해
fixed: 지원되지 않습니다.대상 포지셔닝은 절대 (absolute) 방식을 따른다.그런데 규범을 지켜야 돼요.
relative: 대상은 겹칠 수 없지만,left,right,top,bottom 등 속성에 따라 정상적인 문서 흐름에서 위치를 바꾸어 대상을 검색하는 위치입니다.
이 속성 값을 absolute로 설정하면 대상을 정상적인 문서 흐름에서 절대적으로 끌어내며 주위 내용의 레이아웃을 고려하지 않습니다.만약 다른 z-index 속성을 가진 대상이 이미 주어진 위치를 차지한다면 그들 사이는 서로 영향을 주지 않고 같은 위치에서 겹칠 것이다.이 때 대상은 외부 패치 (margin) 가 없지만, 내부 패치 (padding) 와 테두리 (border) 가 있습니다.
[이상에서 말한 바와 같이 대상은 외부 패치(margin)가 없지만 내부 패치(padding)와 테두리(border)가 있습니다..느낌이 정확하지 않습니다. 테스트를 통해 IE6이나 IE7의 표준 모드나Qurik 모드나 Firfox3 같은 다른 모드를 발견할 수 있습니다.05버전이나 다른 브라우저에서 편향 속성을 적용한 요소는 여전히 Margin 속성을 가지고 있다. 단지 층을 나누는 이유로 이 Margin 속성은 층을 뛰어넘어 다른 층 요소에 영향을 주지 못할 뿐이다.]
대상의 절대 (absolute) 위치를 활성화하려면left,right,top,bottom 속성 중 최소한 하나를 지정하고 이 속성 값을 absolute로 설정해야 합니다.그렇지 않으면 상기 속성은 기본값인 auto를 사용합니다. 이로써 대상은 정상적인 HTML 레이아웃 규칙을 따르고 이전 대상이 바로 전달됩니다.
이 속성 값을 relative로 설정하면 일반적인 HTML 흐름에서 객체가 유지되지만 이전 객체에 따라 위치가 오프셋됩니다.상대적(relative) 포지셔닝 대상 이후의 텍스트나 대상은 자신들의 공간을 차지하고 포지셔닝 대상의 자연 공간을 덮어쓰지 않는다.이와 달리 절대 (absolute) 포지셔닝 대상 이후의 텍스트나 대상은 포지셔닝 대상이 정상적인 문서 흐름에서 끌리기 전에 자연 공간을 차지한다.절대 (absolute) 포지셔닝 대상을 가시 영역 밖에 두면 스크롤 바가 나타납니다.반면에 상대적(relative) 포지셔닝 대상을 가시 영역 밖에 두면 스크롤 바가 나타나지 않는다.
컨텐트 치수는 배치에 따라 객체의 치수를 결정합니다.예를 들어div 대상의height와position 속성을 설정하면div 대상의 내용이 그 너비(width)를 결정합니다.
이 속성은currentStyle 객체에 대해 읽기 전용입니다.다른 대상에게는 읽기와 쓰기가 가능하다.
대응하는 스크립트 특성은position입니다.