htnl의 마스크 층 및 위치 추적 방식

페이지에 마스크 레이어를 표시합니다. 예를 들어, div의 css 스타일:

1 $msk.css({
2     "top":"0", "left":"0", 
3     "position":"fixed", "display":"block", 
4     "width":"100%", "height":"100%", 
5     "background":"white", "zIndex":"500", 
6     "opacity":"0.3", "filter":"Alpha(opacity=30)" 
7 });

1: 위치 지정 방법:
     
absolute: 절대 포지셔닝 요소를 생성하여static 포지셔닝 이외의 첫 번째 부모 요소에 대한 포지셔닝을 합니다.
원소의 위치는'left','top','right'및'bottom'속성을 통해 규정된다.
fixed: 브라우저 창에 대한 절대 포지셔닝 요소를 생성합니다.
원소의 위치는'left','top','right'및'bottom'속성을 통해 규정된다.
relative: 상대적인 포지셔닝 요소를 생성하여 정상적인 위치에 대한 포지셔닝을 합니다.
따라서 "left:20"은 요소의 LEFT 위치에 20픽셀을 추가합니다.
static: 기본값입니다.포지셔닝이 없으면 원소가 정상적인 흐름에 나타납니다. (top,bottom,left,right 또는z-index 성명을 무시합니다.)
inherit는 부모 요소에서position 속성의 값을 계승해야 한다고 규정합니다.
2: 표시 방법:
none: 이 요소는 표시되지 않습니다.
Block::"이 요소는 블록 레벨에서 이 요소의 앞뒤에 줄 바꿈 문자를 표시합니다
3: 표시 순서: zIndex
 
이 요소는 요소의 중첩 순서를 설정하고 z축을 따라 위치를 설정합니다. z축은 수직 디스플레이 영역의 축으로 정의되고 양수이면 사용자와 가깝고 음수이면 사용자와 더 멀다는 것을 의미합니다.
간단하게 말하자면 z-index는 주로 공간 위치의 상부 접합 관계 조정에 사용되는데 z-index 속성의 값이 클수록 시각적으로 이 요소는 우리와 가깝다.
주석: 요소는 마이너스 z-index 속성 값을 가질 수 있습니다.
주석: Z-index는 위치 요소에만 적용됩니다(예: position:absolute;)!
4: 투명도 표시:

   opacity：（0-1   ）；
   0      ，1       。
   eg: opacity:1.0; 
       filter:alpha(opacity=100);  (          )

5: 포지셔닝 확장:
1. 정적 포지셔닝:position:static;
정적 위치추적(static)은 브라우저가 기본적으로 설정한 위치추적 방식으로 이러한 방식으로 모든 블록 요소는 한 줄로 표시되고 블록 요소의 간격, 테두리 등은 구체적인 웹 페이지의 CSS 스타일시트 규칙에 의해 확정된다.그것은 간단하게 문서의 일반적인 흐름을 따른다.원소가 정적 위치일 때 top와left 속성이 올바르지 않습니다.
2. 상대적 포지셔닝:position:relative;(중요)
이런 포지셔닝 형식은 정적 포지셔닝과 매우 비슷하다. 왜냐하면 요소는 다른 지령의 영향을 받지 않는 한 문서의 일반적인 흐름을 계속 따르기 때문이다.단, top나left 속성을 설정하면 원소가 원시 (정적) 위치에 비해 편이됩니다.상자는 원래의 위치를
기준이 이동하는데 네 개의 속성 top,bottom,left,right가 있는데 구체적인 속성 값을 설정하여 상자가 이 방향에서 일정한 거리를 이동한다.상대적인 포지셔닝 방식은 상자가 표준 흐름을 벗어나지 않고 형제 상자의 포지셔닝에 아무런 영향을 주지 않는다. 마치 이 상대적인 포지셔닝 요소가 제자리에 있는 것과 같다.
3. 절대 포지셔닝:position:absolute;(중요)
절대 포지셔닝 요소는 페이지 레이아웃의 일반적인 흐름에서 완전히 벗어나 첫 번째 비정상적인 포지셔닝의 조상 요소에 비해 보여집니다.이러한 선조 요소가 없으면 전체 문서에 상대적입니다.
절대 포지셔닝을 사용하는 상자는'최근'의'이미 포지셔닝'의'조상 요소(부 상자)'를 기준으로 포지셔닝을 한다. 이곳의'이미 포지셔닝'은 static 방식을 제외한 다른 요소 포지셔닝 방식을 사용하여 포지셔닝을 하고 없으면 리유람기 창을 기준으로 한다.절대적으로 포지셔닝된 상자는 문서 흐름에서 벗어났고 형제 상자는 포지셔닝할 때'존재하지 않는다'고 여긴다.
4. 고정 포지셔닝:position:fixed;
고정 위치는 브라우저 창을 기준으로 요소를 배치합니다.요소의 top와left를 0으로 설정하면 브라우저의 왼쪽 상단에 표시됩니다. 브라우저 스크롤 바의 드래그를 완전히 무시하고 사용자의 시야에 계속 나타납니다.
고정 포지셔닝 (fixed) 은 절대 포지셔닝 방식과 유사하지만, 한 가지 다른 것은 고정 포지셔닝 상자는 브라우저 창을 기준으로 하고, 부모 상자가 포지셔닝되었는지 여부에 관심을 두지 않는다는 것이다.