Абсолютное позиционирование внутри относительного позиционирования

У меня есть небольшая проблема с моим коротким кодом. Here вы найдете мой сайт. Это только изображение с кнопкой на нем. Моя проблема в том, что теперь кнопка перемещается, когда я хочу масштабировать окно браузера. Поэтому кнопка будет в любом другом месте на разных браузерах, компьютеры, мобильные телефоны, ...Абсолютное позиционирование внутри относительного позиционирования

Это мой код:

<center> 

<div style="position: relative; left: 0; top: 0;"> 
    <img src="/images/home2.png" style="position: relative; bottom: 0; left: 0;"/> 
    <div style="position: absolute; right: 300; bottom: 250;"> 
     <a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '" /></a> 
    </div> 
</div> 

</center>

источник

2014-09-15 paettmeister

Попробуйте это:

<div style="position: relative; left: 0; top: 0; margin: 0 auto; width:892px"> 
    <img src="/images/home2.png" style="position: relative; bottom: 0; left: 0;"> 
    <div style="position: absolute; right: -145px; bottom: 250;"> 
    <a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '"></a> 
    </div> 
</div>

источник

2014-09-15 14:36:12 Anton

Это может быть одним из варианты. Это фиксирует изображение в постоянном месте. Попробуйте это.

<div style="position: fixed; left: 0; top: 0;"> 

<img src="/images/home2.png" style="position: fixed; left: 453; top: 449;"/> 
<div style="position: absolute; right: 300; bottom: 250;">

источник

2014-09-15 14:36:50 SamDJava

Проблема заключается в том, ваш div является полной ширины окна браузера, position: absolute относится к полной ширине вашего div, а не к ширине изображения. Кроме того, вы должны экспортировать свои стили в файл extern .css, inline .css - не лучшая техника.

вот что вы должны изменить

<div style="position: relative;background: url(/images/home2.png);width: 800px;height: 800px;"> 
    <div style="position: absolute; right: 30px; bottom: 125px;"> 
    <a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '"> 
    </a> 
</div>

EDIT:

здесь это лучший способ добиться того, что вы хотите с помощью CSS

HTML

<div class="container"> 
    <div class="button"> 
    <a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '"> 
    </a> 
</div>

CSS

.container{ 
    position: relative; 
    background: url(/images/home2.png); 
    width: 800px; 
    height: 800px; 
    margin-left: auto; 
    margin-right: auto; 
} 
.button{ 
    position: absolute; 
    right: 30px; 
    bottom: 125px; 
}

источник

2014-09-15 14:38:08

Ну много проблем с этим кодом :)

Во-первых, вам не нужно устанавливать left: 0 или top: 0 на элемент, есть position:relative;. Когда вы используете координаты при относительном позиционировании, это означает: перейдите на XXpx вверху своего текущего места. Итак, когда вы ставите 0, вы имеете в виду: оставайтесь в своем текущем месте.

Затем я очистил свой код:

<body background="http://www.pugganagga.com/images/giftly.png" text="#990000" link="#0000CC" vlink="#000066" alink="#000000">  
<div style="width: 800px; margin: 10px auto; position: relative; "> 
    <img src="/images/home2.png" > 
    <div style="position: absolute; right: 50px; bottom: 250px;"> 
     <a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '"></a> 
    </div> 
</div> 
</body>

Я удалил устаревшую center тега, удалить бесполезные `позиции: относительную и использовали единицы для координат (200px вместо 200, как в CSS, это означает, ничего).

источник

2014-09-15 14:44:28 enguerranws

Абсолютное позиционирование внутри относительного позиционирования

ответ

Смежные вопросы