将图像放置在其容器之外答案

【问题标题】：Position an image outside of its container将图像放置在其容器之外
【发布时间】：2010-10-27 12:22:46
【问题描述】：

我非常头疼试图让包含在 div 中的图像看起来漂浮在其包含元素之外。

虽然我很确定这是不可能的，但我想确保在告诉设计师和客户他们不会让它看起来与设计中概述的完全一样之前，我已经用尽了所有途径规格。

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

我目前能够达到的结果looks like this。如您所见，如果您尝试将图像放置在其定义的边距之外，它将“滑入”任何重叠的位置。

我尝试过绝对定位、浮动和任何其他想到的东西。我受限于<h1> 元素的边距，您可以在第一个屏幕截图中看到它的最后几个字母。

可根据要求提供代码/CSS。谁告诉我这实际上可以实现以及如何实现。

代码sn-ps： 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.

【问题讨论】：

您可能想在此处发布代码。如果直接嵌入到您的帖子中太多，也许可以使用 pastebin 或其他东西？
在上面提供的 sn-p 中，我将我们的图标封装在 span 标签中，但我真的（真的）不再关心我如何达到预期的结果。
对不起，菲尔，我帮不上忙；我找不到任何会使它不起作用的东西。我唯一的建议是尝试将零件拿走，直到您发现导致它无法按预期工作的原因。不过，肯定有办法让它发挥作用。再次抱歉。

标签： html css image

【解决方案1】：

对图片做相对定位怎么样？

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

-X 在哪里可以让它从 DIV 中窥视。

如果这不起作用，我还有其他一些想法，但我肯定希望看到您的 HTML，以便我可以轻松地在 Firebug 上使用它。

编辑：您发布的 html 还不够，因为查看代码的全部目的是能够拥有一个副本，您可以轻松地在 Firebug 等上尝试使用。但是，我理解您犹豫/无法在此处发布整个页面。无论如何，我不会使用<span> 来显示图像，我只会使用实际图像。 It worked fine for me.

【讨论】：

很遗憾没有。这会导致图像在其邻居或父级下方滑动。换句话说，如果您定位一个图像，使其最终移动到由容器边距设置的边界之外，则该图像将落后于它试图重叠的容器（如果这有意义的话？）。
@Phil.. 听起来你可以溢出：隐藏在你的元素上。将其更改为溢出：可见
@Paolo - 是的，即使 z-index 设置为 20000。仍然出现在后面。 @alex - 溢出是一个很好的领导，但仍然没有好处。
@Phil：那你能发一些 HTML 吗？我确定有可能，我只是不知道您的 HTML 是如何设置的。
不幸的是，我似乎无法提供更多代码，因为它始终包含商业敏感内容。我扩展了样式以确保 HTML 示例中提到的任何内容都显示在 CSS 示例中。这应该是足够的代码来提供一个工作模型。我相信正在使用的网格布局结构部分是边缘之外的图像行为的原因。很抱歉没有更多有用的信息。

【解决方案2】：

使用负上边距有时会起作用，具体取决于您的 HTML。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您的图像被截断的原因是因为其中一个父元素引用了“col-last”类，该类已将溢出设置为“隐藏”。您的页面正在告诉浏览器截断图像。

如果您可以删除该溢出属性，或者将其修改为“可见”，它将允许图像溢出。

如果图像仍然被截断，因为使用“section-heading”类的父元素是相对定位的，您可以将图像设置为具有绝对位置，这将允许图像也以这种方式显示（但只要图像有“隐藏”溢出，我认为这不会起作用。

图片的css示例：

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

但是，如果您这样做，文本将位于图像下方。您必须适当设置 h4 标签左侧的内边距或边距，才能将其再次推回视图中。

【讨论】：

这对我帮助很大，我的图像也被截断了，但是因为一个溢出设置为隐藏。
这也是帮助我的那个。我有溢出：隐藏；在父元素上。将其设置为溢出：可见；为我解决了。

【解决方案5】：

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

【讨论】：