Форум на Kuban.ru (http://forums.kuban.ru/)
-   Веб-дизайн и программирование (http://forums.kuban.ru/f1030/)
-   -   Глюк для любопытных (http://forums.kuban.ru/f1030/glyuk_dlya_lyubopytnyh-6689863.html)

buh 06.04.2015 12:59
Глюк для любопытных
 
Делаем такой html:

<!DOCTYPE HTML>
<head>
<meta charset='UTF-8'>
</head>
<body>
<div style='filter: alpha(Opacity=0); opacity: 0; line-height: 0.1;'>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
<button>Кнопка кнопка кнопка</button>
</body>


В результате див наезжает на кнопку и нажать ее получается только в нижней половине, а верхняя половина кнопки не нажимается.

Почему так получается? Не могу понять логику расчетов браузеров.

Искусственный Интеллект1 06.04.2015 16:06
Прозрачность влияет на порядок наложения элементов. Смотрите [url]http://habrahabr.ru/post/166435/[/url] .

buh 06.04.2015 20:54
1-Искусственный Интеллект1 >Да вроде по логике в примере нету никакого наложения. Идет див, следом баттон.

Искусственный Интеллект1 06.04.2015 22:31
Похоже за счет line-height: 0.1 уменьшается высота блока div (не могу сказать почему, очень редко использую это свойство). Но контент блока (в примере пробелы и дефисы) выходит за пределы блока. Следующий элемент button располагается сразу за блоком div, без учета выступающего контента блока. Отсюда и получается наложение элементов. Свойство opacity, меньшее 1, меняет порядок наложения элементов, и получается, что div выше располагается чем кнопка.

Dude 08.04.2015 19:15
line-height

buh 10.04.2015 20:59
3-Искусственный Интеллект1 >Да, видимо так.


Текущее время: 07:41. Часовой пояс GMT +3.