В процессе проектирования HTML-страниц мы часто сталкиваемся с проблемами, вызванными тем, что элементы формы перекрывают элементы стиля. Типичный пример — это рисунок 1. Не стоит недооценивать эту, казалось бы, «низкоуровневую» проблему. Подобные проблемы нередки даже на некоторых крупных сайтах. В этой статье исследуется основная причина этой проблемы и предлагается решение. Причина, по которой я говорю о средстве, а не о постоянном решении, заключается в том, что у двух гигантов Microsoft и NetScape пока нет контрмер.
1. Отображение приоритета HTML-элементов.
Обычно используемые элементы формы в HTML включают в себя: текстовую область (TEXTAREA), поле списка (SELECT), поле ввода текста (тип INPUT = текст), поле ввода пароля (тип INPUT = пароль), поле ввода радио (тип INPUT = радио), установите флажок ввода (тип ввода = флажок) и т. д. К общим элементам, не связанным с формой, относятся: тег ссылки (A), тег DIV, тег SPAN, тег TABLE и т. д. Основная причина, по которой элементы формы переопределяют элементы стиля, заключается в правилах приоритета отображения по умолчанию для элементов HTML. Например: элементы фрейма всегда имеют приоритет над другими элементами HTML и, следовательно, всегда отображаются спереди. Элементы формы всегда имеют приоритет над всеми не-элементами; элементы формы.
Все эти HTML-элементы можно разделить на две категории в зависимости от требований к их отображению, а именно: оконные элементы и безоконные элементы. К оконным элементам относятся: элементы SELECT, элементы OBJECT, плагины и элементы IFRAME в IE 5.01 и более ранних версиях. К безоконным элементам относятся: большинство обычных элементов HTML, таких как ссылки и теги TABLE, большинство элементов формы, за исключением элементов SELECT, и элементы IFRAME в NS6+/IE 5.5 и более поздних версиях. Проблемы, обсуждаемые в этой статье, в основном связаны с оконными элементами HTML. Суть проблемы заключается в том, что операционная система по умолчанию всегда отображает оконные элементы перед элементами без окон.
2. Тип браузера и приоритет отображения.
В зависимости от типа браузера порядок отображения элементов HTML также различается, который суммируется следующим образом:
⑴Netscape/Mozilla
В версиях до NS Browser 6.0 элементы формы всегда имели более высокий приоритет, чем другие элементы HTML. Но в браузере NS 6+ порядок отображения элементов IFRAME и всех элементов формы определяется либо значением атрибута z-index CSS, либо порядком, в котором они появляются на HTML-странице, за исключением SELECT. элемент.
⑵Интернет Эксплорер
В последней версии браузера IE (6.0) элемент IFRAME и все элементы формы определяют приоритет отображения на основе значения атрибута z-index или порядка, в котором они появляются на HTML-странице, за исключением элемента SELECT.
⑶ Опера
В последних версиях браузеров Opera (7.10*) все элементы формы, включая SELECT, имеют приоритет отображения на основе атрибута z-index или порядка, в котором они появляются на HTML-странице. Однако последняя версия браузера Opera не отображает IFRAME как элемент без окон. IFRAME рассматривается как оконный элемент и имеет приоритет над всеми элементами без окон в порядке отображения.
3. Атрибут CSS z-index
Мы знаем, что атрибут CSS z-index можно использовать для управления порядком наложения любого элемента HTML при его отображении. Когда несколько элементов HTML перекрываются в одном пространстве, элемент с большим значением z-индекса перезапишет элемент с меньшим значением z-индекса.
Но значение атрибута z-index не всесильно. Как упоминалось ранее, оконные элементы всегда отображаются перед элементами без окон, а значение атрибута z-index играет решающую роль только между элементами одного и того же типа. Образно говоря, элементы с окном и элементы без окон подобны рисованию на двух разных холстах в одном окне браузера. Эти два типа элементов являются автономными, и их атрибуты z-index относятся только к другим элементам на том же холсте. ворваться.
4. Средство правовой защиты
Что касается современных браузеров, то более эффективным средством является следующее: когда элемент без окон необходимо закрыть элементом окна, используйте сценарий для динамического скрытия элемента окна. Вот полный пример:
<html><head>
<тип стиля=текст/css>
.menuBlock{position:relative;top:14px;width:165px;border:2px сплошной чёрный;}
#subMenus{position:relative;left:15px;top:15px;width:171px;
отступ слева: 2 пикселя; отступ справа: 2 пикселя; граница: 2 пикселя сплошной черный;
z-индекс: 100; видимость: скрыто;}
#lb_1 {позиция: абсолютная; влево: 10 пикселей; сверху: 40 пикселей }
</стиль>
<тип сценария=текст/javascript>
вар isActive = ложь;
функция showMenu(){
isActive = правда;
//document.getElementById(lb_1).style.visibility=hidden;
document.getElementById(subMenus).style.visibility=visible;
}
функция скрытьМеню(){
isActive = ложь;
setTimeout('hide()',100);
}
функция скрыть(){
если(!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 =
скрытьМеню();
}
</script></head><body>
<div id=main style=position:absolute;width:200px;>
<div id=menuBlock class=menuBlock onmouseover=showMenu();
onmouseout=hideMenu();>CSS-меню</div>
<div id=подменю>
<div id=0 onmouseover=setStyle(this)
onmouseout=setDefault(this) >Первый пункт меню</div>
<!--Всего четыре пункта меню-->
</div><P>
<select id=lb_1 name=lb_1>
<option value=-1/>Выбрать список
<!--Три варианта-->
</выбрать>
</div>
</body></html>
Часть страницы <STYLE> определяет три стиля, которые используются для строк меню, пунктов меню и списков выбора. Определение стиля обеспечивает перекрытие областей отображения меню и списков выбора. Раздел <BODY> содержит определения меню и списков выбора <SELECT>. Когда указатель мыши проходит над строкой меню, выполняется функция JavaScript showMenu, чтобы отобразить меню и скрыть список выбора SELECT. После того, как мышь уйдет, функцияideMnu скрывает меню и восстанавливает список выбора. Остальные функции JavaScript в основном используются для имитации действий меню. Когда мышь проходит над элементом меню, меню отображается с высокой яркостью (функция setStyle), а когда мышь покидает пункт меню, оно восстанавливается в режим отображения по умолчанию. (функция setDefault). Эффект работы страницы показан на рисунке 2. Закомментируйте оператор document.getElementById(lb_1).style.visibility=hidden в функции showMenu, чтобы увидеть эффект на рис. 1.
<описание>
<img src=http://www.chinahtml.com/cce/img/553/04601t02.jpg>
</дескрипт>
Короче говоря, основная причина переопределения элементов формы элементами стиля заключается в правилах приоритета отображения по умолчанию для элементов HTML. Средства, представленные в этой статье, действительно эффективны, но если вы действительно не хотите использовать этот метод, вам придется подумать об изменении макета страницы, чтобы избежать перекрытия области отображения элементов формы и элементов стиля.