Форум

makc0993 · #1 (**permalink**) 23.02.2013, 17:31

Подскажите, пожалуйста, как закрепить изображение, примерно как здесь, только чтобы при прокрутке оставалась на месте.

http://webmaster-html.ucoz.ru/publ/h...sajte/3-1-0-21

danik.js · #2 (**permalink**) 23.02.2013, 17:39

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

Deff · #3 (**permalink**) 23.02.2013, 17:45

<body style="height:1000"><!-- Это для теста -->



<!-- Код -->
<div style="position: fixed; top: 20%;left:240px;">
<img src="http://sasha7294.narod2.ru/WEB/107439.png" border="0"/>
</div>

makc0993 · #4 (**permalink**) 23.02.2013, 17:53

эм...я, походу, неправильно объяснил) мне нужно, чтобы изображение оставалось на определенном месте на странице и чтобы при прокрутке вниз оно оставалось наверху. как обычная вставка изображения только чтобы ложилось поверх всего и не зависело от других объектов, как с fixed, только без перемещения при прокрутке.

danik.js · #5 (**permalink**) 23.02.2013, 17:56

position:absolute ?

Deff · #6 (**permalink**) 23.02.2013, 17:56

<body style="height:1000"><!-- Это для теста -->



<!-- Код -->
<div style="position:absolute;z-index:10000;top:100px;margin-left:240px;">
<img src="http://sasha7294.narod2.ru/WEB/107439.png" border="0"/>
</div>

makc0993 · #7 (**permalink**) 23.02.2013, 18:01

Точно! absolute. вроде пробовал его использовать не получалось, наверное, что-то не то написал) а сейчас работает как надо. Большое спасибо!)

makc0993 · #8 (**permalink**) 25.02.2013, 06:50

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

Deff · #9 (**permalink**) 25.02.2013, 06:57

<body style="height:1000"><!-- Это для теста -->



<!-- Код -->
<div style="height:100px;width:200px;border:red 1px solid;">Опорный</div>
<div style="position:absolute;z-index:10000;margin-top:140px;margin-left:240px;border:green 1px solid;">
<img src="http://sasha7294.narod2.ru/WEB/107439.png" border="0"/>
</div>

makc0993 · #10 (**permalink**) 25.02.2013, 07:57

Deff,
спасибо) долго сидел думал чем ваш код отличается от моего, оказывается в margin дело, теперь буду знать)

Форум

Справочник

Discord чат

Курсы javascript