HTML 페이지를 디자인하는 과정에서 스타일 요소를 덮고 있는 폼 요소로 인해 문제가 발생하는 경우가 종종 있습니다. 그림 1이 그 대표적인 예입니다. 이러한 "낮은 수준"의 문제를 과소평가하지 마십시오. 일부 대형 웹사이트에서도 유사한 문제가 흔히 발생합니다. 이 기사에서는 이 문제의 근본 원인을 탐구하고 해결책을 제안합니다. 제가 영구적인 해결책이 아닌 해결책이라고 말하는 이유는 두 거대 기업인 Microsoft와 NetScape가 아직 대책을 세우지 못했기 때문입니다.
1. HTML 요소의 우선순위 표시
HTML에서 일반적으로 사용되는 양식 요소에는 텍스트 영역(TEXTAREA), 목록 상자(SELECT), 텍스트 입력 상자(INPUT 유형=text), 비밀번호 입력 상자(INPUT 유형=password), 라디오 입력 상자(INPUT 유형=radio), 입력 상자 확인(INPUT 유형=체크 상자) 등 일반적인 비형식 요소로는 링크 태그(A), DIV 태그, SPAN 태그, TABLE 태그 등이 있습니다. 양식 요소가 스타일 요소보다 우선하는 근본적인 이유는 HTML 요소의 기본 표시 우선순위 규칙에 있습니다. 양식 요소.
이러한 모든 HTML 요소는 표시 요구 사항에 따라 두 가지 범주, 즉 창 요소와 창 없는 요소로 나눌 수 있습니다. 창 요소에는 IE 5.01 및 이전 버전의 SELECT 요소, OBJECT 요소, 플러그인 및 IFRAME 요소가 포함됩니다. 창 없는 요소에는 링크 및 TABLE 태그와 같은 대부분의 일반적인 HTML 요소, SELECT 요소를 제외한 대부분의 양식 요소, NS6+/IE 5.5 이상의 IFRAME 요소가 포함됩니다. 이 기사에서 논의된 문제는 주로 창 HTML 요소와 관련되어 있습니다. 문제의 핵심은 운영 체제가 기본적으로 항상 창 없는 요소 앞에 창 요소를 표시한다는 것입니다.
2. 브라우저 유형 및 표시 우선순위
브라우저 유형에 따라 HTML 요소의 표시 순서도 달라지는데, 이를 요약하면 다음과 같습니다.
⑴넷스케이프/모질라
NS Browser 6.0 이전 버전에서는 양식 요소가 항상 다른 HTML 요소보다 우선순위가 높았습니다. 그러나 NS 6+ 브라우저에서 IFRAME 요소와 모든 양식 요소의 표시 순서는 CSS의 z-index 속성 값이나 SELECT를 제외하고 HTML 페이지에 나타나는 순서에 따라 결정됩니다. 요소.
⑵인터넷 익스플로러
최신 IE 브라우저(6.0)에서 IFRAME 요소와 모든 양식 요소는 SELECT 요소를 제외하고 z-index 속성 값이나 HTML 페이지에 나타나는 순서에 따라 표시 우선순위를 결정합니다.
⑶ 오페라
최신 Opera(7.10*) 브라우저에서는 SELECT를 포함한 모든 양식 요소가 Z-색인 속성 또는 HTML 페이지에 나타나는 순서에 따라 표시 우선순위가 지정됩니다. 그러나 최신 Opera 브라우저에서는 IFRAME을 창 없는 요소로 표시하지 않습니다. IFRAME은 창 있는 요소로 간주되며 표시 순서에서 모든 창 없는 요소보다 우선합니다.
3. CSS z-index 속성
우리는 CSS의 z-index 속성을 사용하여 HTML 요소가 표시될 때 해당 요소의 오버레이 순서를 제어할 수 있다는 것을 알고 있습니다. 여러 HTML 요소가 동일한 공간에서 겹치는 경우 Z-색인 값이 더 큰 요소가 Z-색인 값이 더 작은 요소를 덮어씁니다.
그러나 z-index 속성 값은 전능하지 않습니다. 앞서 언급한 것처럼 윈도우가 있는 요소는 항상 윈도우가 없는 요소 앞에 표시되며, z-index 속성 값은 동일한 유형의 요소 간에만 결정적인 역할을 합니다. 비유적으로 말하면, 윈도우가 있는 요소와 윈도우가 없는 요소는 동일한 브라우저 창에서 두 개의 서로 다른 캔버스에 그림을 그리는 것과 같습니다. 두 가지 유형의 요소는 독립적이며 해당 z-index 속성은 동일한 캔버스에 있는 다른 요소와만 관련됩니다. 시작하다.
4. 구제책
현재 브라우저에 관한 한 보다 효과적인 해결 방법은 창 없는 요소를 창 요소로 덮어야 하는 경우 스크립트를 사용하여 창 요소를 동적으로 숨기는 것입니다. 완전한 예는 다음과 같습니다.
<html><헤드>
<스타일 유형=텍스트/css>
.menuBlock{position:relative;top:14px;width:165px;border:2px 단색 검정색;}
#subMenus{위치:상대적;왼쪽:15px;위쪽:15px;너비:171px;
padding-left:2px;padding-right:2px;border:2px 단색 검정색;
z-색인:100;가시성:숨김;}
#lb_1{위치:절대;왼쪽:10px;상단:40px }
</style>
<스크립트 유형=텍스트/자바스크립트>
var isActive = 거짓;
함수 showMenu(){
isActive = 사실;
//document.getElementById(lb_1).style.visibility=hidden;
document.getElementById(subMenus).style.visibility=visible;
}
함수 hideMenu(){
isActive = 거짓;
setTimeout('hide()',100);
}
함수 숨기기(){
if(!isActive){
document.getElementById(subMenus).style.visibility = 숨김;
document.getElementById(lb_1).style.visibility=visible;
}
}
함수 setStyle(menuItem){
isActive = 사실;
menuItem.style.BackgroundColor = 회색;
menuItem.style.color = #FFFFFF
}
함수 setDefault(menuItem){
isActive = 거짓;
menuItem.style.BackgroundColor = ;
menuItem.style.color =
hideMenu();
}
</script></head><몸>
<div id=기본 스타일=위치:절대;너비:200px;>
<div id=menuBlock 클래스=menuBlock onmouseover=showMenu();
onmouseout=hideMenu();>CSS 메뉴</div>
<div id=하위 메뉴>
<div id=0 onmouseover=setStyle(this)
onmouseout=setDefault(this) >메뉴 항목 1</div>
<!--총 4가지 메뉴 항목-->
</div><P>
<ID=lb_1 이름=lb_1 선택>
<옵션 값=-1/>목록 선택
<!--세 가지 옵션-->
</select>
</div>
</body></html>
페이지의 <STYLE> 부분은 메뉴 표시줄, 메뉴 항목 및 선택 목록에 각각 사용되는 세 가지 스타일을 정의합니다. 스타일 정의는 메뉴 및 선택 목록의 표시 영역이 겹치도록 합니다. <BODY> 섹션에는 메뉴 및 <SELECT> 선택 목록에 대한 정의가 포함되어 있습니다. 마우스가 메뉴 표시줄 위로 이동하면 JavaScript 함수 showMenu가 실행되어 메뉴를 표시하고 SELECT 선택 목록을 숨깁니다. 마우스가 떠난 후 hideMnu 함수는 메뉴를 숨기고 선택 목록을 복원합니다. 나머지 JavaScript 기능은 주로 메뉴 동작을 시뮬레이션하는 데 사용됩니다. 마우스가 메뉴 항목 위로 이동하면 메뉴가 높은 밝기로 표시되고(setStyle 기능) 마우스가 메뉴 항목을 벗어나면 기본 표시 모드로 복원됩니다. (setDefault 함수). 페이지의 실행 효과는 그림 2에 나와 있습니다. 그림 1에서 효과를 보려면 showMenu 함수에서 document.getElementById(lb_1).style.visibility=hidden 문을 주석 처리하세요.
<설명>
<img src=http://www.chinahtml.com/cce/img/553/04601t02.jpg>
</descript>
즉, 양식 요소가 스타일 요소보다 우선하는 근본 원인은 HTML 요소의 기본 표시 우선순위 규칙에 있습니다. 이 글에서 소개하는 해결방법은 정말 효과적이지만, 정말 이 방법을 사용하고 싶지 않다면, 폼 요소와 스타일 요소의 표시 영역이 겹치지 않도록 페이지 레이아웃을 변경하는 것을 고려해야 합니다.