Абсолютное позиционированное изображение в Относительном div разбивает макет страницы

Question

У меня есть изображение с position:absolute;right-300px; внутри контейнера с position:relative;, так как я хочу, чтобы изображение вышло из div и вправо.

Вы можете увидеть его рабочий here. Это первое крупное изображение справа.

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

Если я положил overflow:hidden; на контейнер div, он скроет остальную часть изображения, и мне нужно, чтобы изображение получилось и было полностью видимым.

У кого-нибудь есть предложения по этому поводу?

Я пытался писать на пример, но я взвалив всю страницу вверх казалось лучше http://ciaranhanrahan.com/test/

Ура!

Answer 1

Я хочу, чтобы изображение выйти из DIV и выключаться с правой

Изучение макет страницы, то появляется изображение не нужно быть в <div> вообще.

Вы можете указать <img /> a position:absolute;.

Затем вы можете включить разметку <img /> в любом месте вашего источника HTML.

Например, это изображение размером 495 КБ (т. Е. Довольно тяжелое), поэтому вы можете включить абсолютно позиционированный <img /> в самый конец вашего HTML-источника, что означает, что для посетителей, впервые посетивших вашу страницу, появится страница загружайте быстрее.

Вам не нужно вставлять абсолютно нулевое положение <img /> внутри родительского элемента, что означает, что вам не нужно возиться с отрицательным позиционированием, наследованием CSS, скрытием переполнения и т. Д.