Абсолютный в позиции относительный div?

По существу у меня есть два изображения: лампа без света и одна с подсветкой, и когда пользователь наводил на изображение изображение, оно загорается.Абсолютный в позиции относительный div?

Я пытаюсь расположить лампу в определенном месте с абсолютным положением, которое отлично, но всякий раз, когда я масштабирую страницу, она меняет положение, теперь я знаю, что это происходит потому, что она выходит из потока страницы, поэтому я читаю связанные темы, чтобы поместить его в div с относительным положением, я сделал это, но он все еще не работает.

#cont { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
#cont a { 
 
    position: absolute; 
 
    bottom: 69px; 
 
    left: 350px; 
 
} 
 
.foo img:last-child { 
 
    display: none 
 
} 
 
.foo:hover img:first-child { 
 
    display: none 
 
} 
 
.foo:hover img:last-child { 
 
    display: inline-block 
 
}

<section class="flexheader"> 
 
    <img class="logo" alt="" src="image/logo.png"> 
 
    <img class="house" alt="" src="image/house.png"> 
 
    <div id="cont"> 
 
    <a class="foo" href="#"> 
 
     <img alt="" src="image/lampnolight.png"> 
 
     <img alt="" src="image/lamp.png"> 
 
    </a> 
 
    </div> 
 
</section>

источник

2016-12-31 Zecele

Оцените справку, но она, похоже, не работает, когда я масштабирую свой веб-сайт, он по-прежнему не остается там, где я хочу, может быть, если я опубликую свой полный код? плохо обновить мой пост. – Zecele

https://github.com/AndrewMC1994/Sherlock – Zecele

Это на нем на github Я не знаю, было ли это полезно? – Zecele

Вы должны использовать это, чтобы сделать масштабирование работу отлично:

.flexheader, 
body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

Snippet

.flexheader, 
 
body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#cont { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
#cont a { 
 
    position: absolute; 
 
    bottom: 69px; 
 
    left: 350px; 
 
} 
 
.foo img:last-child { 
 
    display: none; 
 
} 
 
.foo:hover img:first-child { 
 
    display: none; 
 
} 
 
.foo:hover img:last-child { 
 
    display: inline-block; 
 
}

<section class="flexheader"> 
 
    <img class="logo" alt="" src="//placehold.it/100?text=logo" /> 
 
    <img class="house" alt="" src="//placehold.it/100?text=house" /> 
 
    <div id="cont"> 
 
    <a class="foo" href="#"> 
 
     <img alt="" src="//placehold.it/100?text=lampnolight" /> 
 
     <img alt="" src="//placehold.it/100/ccf?text=lamp" /> 
 
    </a> 
 
    </div> 
 
</section>

источник

2016-12-31 22:00:31

Абсолютный в позиции относительный div?

ответ

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