Html 将图像定位在其容器之外

Position an image outside of its container

提问by Phil.Wheeler

I have a major headache trying to get an image that is contained within a div to appear to float outside of its containing element.

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

While I'm pretty sure this just isn't possible, I want to be sure I've exhausted all avenues before telling designer and client that they're just not going to get it to look exactly as outlined in the design spec.

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

The desired (specified) design looks like this. You can see that there is a globe icon that peeks above the rounded corner background of the heading. This position also has it located above the top margin of the other content blocks on the far left and right of the page (which you can also see in the partial screen shot).

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

The result I'm currently able to achieve looks like this. As you can see, if you try to position an image beyond its defined margins, it will 'slide under' whatever it overlaps.

我目前能够实现的结果如下所示。如您所见，如果您尝试将图像定位在其定义的边距之外，则无论它重叠什么，它都会“滑到”下方。

I've tried absolute positioning, floating and anything else that comes to mind. I'm constrained by the margins of the <h1>element, which you can see the last few letters of in the first screen shot.

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

Code / CSS available on request. Big chocolate fish to whoever tells me that this actually can be achieved and how.

可应要求提供代码/CSS。告诉我这实际上可以实现以及如何实现的大巧克力鱼。

Code snippets: HTML

代码片段：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.

回答by Paolo Bergantino

How about doing relative positioning to the image?

如何对图像进行相对定位？

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

Where -Xis however much it takes to get it to peek out of the DIV.

凡-X然而多少才能得到它偷看DIV出来。

If that doesn't work I have a few other ideas, but I'd definitely like to see your HTML so I can play around with it on Firebug easily.

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

EDIT: The html you posted is not really enough, as the whole point of looking at the code is to be able to have a copy you can easily try stuff with on Firebug and such. I understand your hesitation/inability to post the entire page on here, however. Anyhow, I wouldn't use a <span>to show the image, I would just use an actual image. It worked fine for me.

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

回答by Mike Oliver

The reason your image is getting cut off is because one of the parent elements is referencing the class of "col-last", which has overflow set to "hidden". Your page is telling the browser to cut-off the image.

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

If you can remove that overflow attribute, or modify it to "visible", it will allow the image to overflow.

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

If the image is STILL cutting off, because the parent element using the class "section-heading" is relatively positioned, you can set the image to have an absolute position, which will allow the image to also display that way (but I don't think that will work as long as the image has a overflow of "hidden".

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

Example css for the image:

图像的示例 css：

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

However, if you do that, the text will position itself under the image. You would have to set the padding or margin on the left side of the h4 tag appropriately to push it back out into view again.

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

回答by Terry Thorsen

Try overflow:visibleon the parent (containing) element.

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

回答by nickf

using a negative top margin can sometimes work, depending on your HTML.

根据您的 HTML，使用负上边距有时会起作用。

回答by Tolgahan Albayrak

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