Статический элемент выше абсолютных. Как Исправить?
Всем привет. Помогите с проблемой в IE < 11.
Нужно чтобы ссылка была поверх картинки. Ессно вёрстка должна быть резиновой. Для иллюстриции проблемы я сделал один тэг "а" с шириной 100%. На сайте делаю три с шириной 33%. То есть нечно подобное map/area.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>imgBox</title>
<style type="text/css">
* {margin: 0; padding: 0}
body { max-width: 1024px }
</style>
<script type="text/javascript">
window.onload = function ()
{
var test = {};
test.div = document.createElement('div');
test.div.style.position = 'relative';
test.img = document.createElement('img');
test.img.src = 'http://www.podillbot.3141.ru/levels/blacksite/blacksite1.jpg';
test.img.style.display = 'block';
test.img.style.width = '100%';
test.div.appendChild(test.img);
test.btn = document.createElement('a');
test.btn.href = '#';
test.btn.style.position = 'absolute';
test.btn.style.display = 'block';
test.btn.style.height = '100%';
test.btn.style.width = '100%';
test.btn.style.top = 0;
test.div.appendChild(test.btn);
document.body.appendChild(test.div);
test.btn.myMethod = function (event)
{
if (event && event.preventDefault) event.preventDefault();
else window.event.returnValue = false;
if (event && event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
alert('It`s work!');
}
if (document.addEventListener) test.btn.addEventListener('click', test.btn.myMethod, false);
else if (document.attachEvent) test.btn.attachEvent('onclick', test.btn.myMethod);
}
</script>
</head>
<body>
</body>
</html>
|
Цитата:
Если добавить фон (или фоновую картинку) - все будет работать. Просто сделай его практически прозрачным. ;)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>imgBox</title>
<style type="text/css">
* {margin: 0; padding: 0}
body { max-width: 1024px }
</style>
<script type="text/javascript">
window.onload = function ()
{
var test = {};
test.div = document.createElement('div');
test.div.style.position = 'relative';
test.img = document.createElement('img');
test.img.src = 'http://www.podillbot.3141.ru/levels/blacksite/blacksite1.jpg';
test.img.style.display = 'block';
test.img.style.width = '100%';
test.div.appendChild(test.img);
test.btn = document.createElement('a');
test.btn.href = '#';
test.btn.style.position = 'absolute';
test.btn.style.display = 'block';
test.btn.style.height = '100%';
test.btn.style.width = '100%';
test.btn.style.top = 0;
/* начало */
test.btn.style.left = 0;
test.btn.style.background = '#ffffff';
test.btn.style.opacity = '0.1';
/* окончание */
test.div.appendChild(test.btn);
document.body.appendChild(test.div);
test.btn.myMethod = function (event)
{
if (event && event.preventDefault) event.preventDefault();
else window.event.returnValue = false;
if (event && event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
alert('It`s work!');
}
if (document.addEventListener) test.btn.addEventListener('click', test.btn.myMethod, false);
else if (document.attachEvent) test.btn.attachEvent('onclick', test.btn.myMethod);
}
</script>
</head>
<body>
</body>
</html>
|
ksa,
спасибо за наводку. Я добавил в фон прозрачную картинку размером 1 пиксел. Opacity распространяется на вложенные элементы. |
Цитата:
|
ILL-JAH, про таблицы стилей надеюсь слышал? Стилям не место в скриптах.
|
| Часовой пояс GMT +3, время: 22:39. |