Расположить изображение за пределами его контейнера

У меня есть основная головная боль, пытающаяся получить изображение, содержащееся внутри 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.

Ответ 1

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

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

Где -X, однако, требуется много времени, чтобы заставить его заглянуть из DIV.

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

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

Ответ 2

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

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

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

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

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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