Поместите изображение за пределы контейнера

Question

У меня сильная головная боль, когда я пытаюсь заставить изображение, содержащееся в div, всплывать за пределы содержащего его элемента.

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

Желаемый (указанный) дизайн выглядит следующим образом . Вы можете видеть, что есть значок глобуса, выглядывающий над закругленным угловым фоном заголовка. Эта позиция также расположена над верхним полем других блоков контента в крайнем левом и правом углу страницы (что вы также можете увидеть на частичном снимке экрана).

Результат, которого я сейчас могу достичь , выглядит следующим образом . Как вы можете видеть, если вы попытаетесь расположить изображение за пределами определенных полей, оно будет «скользить» под любым перекрытием.

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

Код / CSS доступны по запросу. Большая шоколадная рыбка тому, кто скажет мне, что это действительно может быть достигнуто и как.

Фрагменты кода: HTML

    .icon
    {
        background: transparent none no-repeat scroll 0 -0.2em;
        padding: 1.8em 0 1em 4em;
    }
    
    .icon-globe
    {
        background-image: url('images/icons/globe.gif');
    }
    
    /* **************** GRIDS ***************** */
    .line, .last-column
    {
        overflow: hidden;
        _overflow:visible;
        _zoom:1;
    }
    
    .column
    {
        float:left;
        _zoom:1;
    }
    
    .col-fullwidth {float:none;}
    .col-halfwidth {width:50%;}
    .col-onethird {width:33%;}
    
    .col-last
    {
        float:none;
        _position:relative;
        _left:-3px;
        _margin-right: -3px;
        overflow: hidden;
        width:auto;
    }

    .padded-sides
    {
        padding: 0 1em;
    }

    .section-heading
    {
        background: transparent url('images/type/section-head.gif') no-repeat top right;
        position: relative;
        margin-left: 1.4em;
    }
    
    .section-heading-cap
    {
        background: transparent url('images/type/section-head-cap.gif') no-repeat top left;
        padding: 0.4em 1em 1.6em;
        margin: 0 0 0 -1em;
    }

 <h1>Contact Us</h1>
    
    <div class="line">
    
        <div class="column col-threequarters">
        
            <div class="line">
            
                <div class="column col-threefifths contact-panel-top">
                            
                    Unrelated stuff...                    
                
                </div>
            
            </div>
            
            <div class="column col-last padded-sides">
            
                <div class="section-heading">
                    <h4 class="section-heading-cap"><img src="/App_Themes/Common/images/icons/globe.gif" alt="International" />International Contacts</h4>
                </div>
                
                ... and so on.

Answer 1

Как насчет относительного позиционирования изображения?

position: relative;
top: -Xpx;
z-index: 99;

Где -X - это все, что нужно, чтобы выглянуть из DIV.

Если это не сработает, у меня есть несколько других идей, но я бы определенно хотел увидеть ваш HTML, чтобы я мог легко поиграть с ним на Firebug.

РЕДАКТИРОВАТЬ : HTML-код, который вы разместили, на самом деле недостаточен, поскольку весь смысл рассмотрения кода заключается в том, чтобы иметь копию, которую вы легко можете попробовать в Firebug и тому подобное. Тем не менее, я понимаю, что вы не решаетесь разместить всю страницу здесь. В любом случае, я бы не использовал <span> для показа изображения, я бы просто использовал реальное изображение. У меня все работало нормально .

Answer 2

Причина, по которой ваше изображение обрезается, заключается в том, что один из родительских элементов ссылается на класс «col-last», для которого переполнение имеет значение «скрытый». Ваша страница сообщает браузеру обрезать изображение.

Если вы можете удалить этот атрибут переполнения или изменить его на «видимый», это приведет к переполнению изображения.

Если изображение по-прежнему отрезано, поскольку родительский элемент, использующий класс «заголовок раздела», относительно позиционирован, вы можете установить для изображения абсолютную позицию, что позволит изображению также отображаться таким образом (но Я не думаю, что это будет работать до тех пор, пока изображение переполнено «скрыто».

Пример css для изображения:

.section-heading .section-heading-cap img
{
    position:absolute;
    bottom:0px;
    left:0px;
}

Однако, если вы это сделаете, текст будет располагаться под изображением. Вам необходимо установить отступы или поля на левой стороне тега h4, чтобы снова вывести их на экран.

Answer 3

Попробуйте overflow:visible на родительском (содержащем) элементе.

Answer 4

использование отрицательного верхнего поля может иногда работать, в зависимости от вашего HTML.

Answer 5

.icon
{
    margin-top:-24px; /*icon height / 2*/
}