Положение картинки относительно блока css?

Question

[Евгений Батулин]

Подскажите как называется такой эффект, когда из блока выпирает картинка

Comments

[Евгений Батулин]

Или если кто делал подобное подскажите пожалуйста как. Спасибо.

[MaksPaverov]

У кого-то это было проблемой
Верстка. Выход изображения за пределы фиксированного div. ?

Answer 1

[Владимир]

Можно через позиционирование
position: relative; - родителю, синему блоку. Относительно него будет позиционироваться дочерний.
positiom: absolute; абсолютное позиционирование картинке. если не указать relative для синего блока, позиционироваться будет от края браузера.

top: в px; - сверху>вниз сместится.
right: в px = справа налево сместится

Comments

[Евгений Батулин]

Спасибо вам! Здесь нужно синему блоку высоту задавать. А есть ли способ без абсолютного позиционирования?

[Владимир]

Так же высота от контента формируется, у меня как раз есть пример.

Я пару дней назад практиковал форму.
Фото с человечком без margin = внутри контейнера размещается.
И эффект с margin. отрицательный сверху -60px , 30px снизу чтобы отделить от inputa. 0 по бокам.


Но вообще не стоит делать например, все марджинами или абсолютном позиционировании, зависит от задачи. Почитайте/изучите позиционирование и смежные темы лучше.

Answer 2

[MaksPaverov]

Что-то нашёл, вроде оно
jsfiddle.net/1c20c7t7

Comments

[Евгений Батулин]

Прошу прощения. Не понял что это.

[MaksPaverov]

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

[Евгений Батулин]

MaksPaverov, простите меня, но я не вижу в этом примере элемента, который выходил бы за рамки родительского блока. Простите меня за мою невнимательность, если можете напишите пожалуйста класс или айдишник элемента и родителя. Спасибо

Answer 3

[Dima Polos]

position absolute, relative
transform translate

Comments

[Евгений Батулин]

Спасибо Дмитрий! а отрицательным margin - ом можно такое сделать?

[Dima Polos]

Евгений Батулин, почему бы не сделать через position?