Закрепить изображение в определенном месте

@Zemlliak · Регистрация: 03.10.2013

Author24 — интернет-сервис помощи студентам

У меня есть код:

HTML5

<style>
    html{
       height: 600px;
    }
    img{
        position: fixed;
        top: 10px;
        left: 10px;
    }
</style>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">

Но при увеличении страницы картинка ездит по сайту, как закрепить на месте?

@Atak · 28.04.2014, 17:11

для начала лучше обернуть картинку в див и диву дать стили, которые ты применил к img

@Zemlliak · 28.04.2014, 17:40 **[ТС]**

Ну допустим так:

HTML5

<style type="text/css">
#topLayer{
position:absolute;
top:0;
left:0;
width:500;
height:100%;
background:transparent url(diz.png) repeat;
z-index:9999;
}
</style>
 
<div id="topLayer"></div>

Все ровно при увеличевании страницы, картинка ездит по сайту.

@Atak · 28.04.2014, 17:50

http://jsbin.com/IWejiHeg/8/

CSS

1	position:fixed;

значит твой див всегда будет находится на заданных координатах, независимо от того, скролят ли стр или нет.

CSS

1	position:absolute;

просто четко и как тебе нужно позиционирует твой элемент.

Ты диву задаешь 100% высоту? относительно чего?

CSS

1	width:500;

Прописывая ширину/высоту не забывай прописывать "px"

@Atak Warning! 326 / 31 / 12 Регистрация: 18.08.2011 Сообщений: 627
	28.04.2014, 17:11	2
	для начала лучше обернуть картинку в див и диву дать стили, которые ты применил к img 0

	28.04.2014, 17:50

Опции темы

Закрепить изображение в определенном месте

Решение