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*/
}

将图像放在其容器外部

5 个答案: