将图像放在其容器外部

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等.但是,我理解您的犹豫/无法在此处发布整个页面.无论如何,我不会使用a <span>来显示图像,我只会使用实际图像.它对我来说很好.

Answer 2

图像被切断的原因是因为其中一个父元素引用了"col-last"类,其溢出设置为"hidden".您的页面告诉浏览器切断图像.

如果您可以删除该溢出属性,或将其修改为"可见",则会允许图像溢出.

如果图像仍然是STILL切断,因为使用"section-heading"类的父元素相对定位,您可以将图像设置为具有绝对位置,这将允许图像也以这种方式显示(但我不是只要图像溢出"隐藏",就会认为这样可行.

图像的示例css:

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

但是,如果您这样做,文本将自己定位在图像下方.您必须适当地设置h4标签左侧的填充或边距,然后再将其推回到视图中.

Answer 3

尝试overflow:visible父（包含）元素。