Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > позиционирование картинки

Автор: lvt 2.5.2012, 13:57

Здравствуйте!

Есть картинка в div'е.

Код


<div>
<img src='' />
</div>
<style>
DIV {width: 90px; height: 90px;}
</style>

Необходимо чтобы картинка вылезала за границы дива сверху, если у нее высота больше, чем высота div'а. У меня она вылезает снизу. Я пробовала position:absolute выставлять, но тогда надо указывать top или bottom, а я не знаю будет ли высота у картинки выше или нет.

Подскажите, пожалуйста, как это сделать.

Автор: baldina 2.5.2012, 15:49

Код


<div class="around">
  <div class="image">
    <img src="xxx.jpg" />
  </div>
</div>
<style>
div.around { width: 90px; height: 90px; position:relative; }
div.image { position:absolute; left:10px; bottom:50px; }
</style>

Добавлено через 5 минут и 35 секунд
если у родительского элемента position отличен от static, то позиция дочернего отсчитывается от позиции родительского. при этом absolute позволяет расположить его произвольно, с перекрытием других элементов.

Добавлено через 8 минут и 20 секунд
вобщем то можно и так:

Код


<div>
  <img src="img.jpg" width="50px"/>
</div>
<style>
  div { width: 90px; height: 90px; position:relative; }
  img { position:absolute; left:10px; bottom:50px; }
</style>

Автор: lvt 2.5.2012, 16:04

Спасибо, все работает. Я забыла про position:relative;