将图像放在其容器外部

Question

我试图让一个包含在div中的图像看起来漂浮在其包含元素之外，这让我头疼不已。

虽然我很确定这是不可能的，但我想确保在告诉设计师和客户他们不会让它看起来与设计规范中概述完全相同之前我已经筋疲力尽了。

所需（指定）设计looks like this。您可以看到有一个地球图标，可以在标题的圆角背景上方查看。此位置还使其位于页面最左侧和右侧的其他内容块的上边距上方（您也可以在部分屏幕截图中看到）。

结果我目前能够实现looks like this。正如您所看到的，如果您尝试将图像定位在其定义的边距之外，则无论重叠如何，它都会“滑入”。

我尝试过绝对定位，浮动和其他任何想到的东西。我被<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>来显示图像，我只会使用实际图像。 It worked fine for me。

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。

Answer 4

使用负上边距有时可以工作，具体取决于您的HTML。

Answer 5

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