代码之家 › 专栏 › 技术社区 › Phil.Wheeler

将图像放置在其容器外

image css html

Phil.Wheeler · 技术社区 · 17 年前

我有一个很头疼的问题,那就是试图得到一个包含在一个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.

5 回复 | 直到 8 年前

Paolo Bergantino 17 年前

对图像进行相对定位怎么样?

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

在哪里? -X 是不是要花多少时间才能让它从分区里偷看出来?

如果这不起作用,我还有其他一些想法,但我绝对想看看你的HTML,这样我就可以轻松地在Firebug上使用它。

编辑 :您发布的HTML还不够,因为查看代码的关键是能够获得一个副本,您可以很容易地在Firebug等上尝试相关内容。不过,我理解你的犹豫/不能把整页都贴在这里。无论如何,我不会用 <span> 为了显示图像,我只使用实际图像。 It worked fine for me .

Mike Oliver 17 年前

图像被切断的原因是因为其中一个父元素引用了“col last”类,该类的溢出设置为“hidden”。您的页面正在通知浏览器切断图像。

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

如果图像仍处于关闭状态,因为使用类“section heading”的父元素相对定位,可以将图像设置为具有绝对位置,这将允许图像也以这种方式显示(但我认为只要图像溢出“hidden”,这不会起作用)。

图像的CSS示例:

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

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

Perception 14 年前

尝试 overflow:visible 在父(包含)元素上。

nickf 17 年前

根据HTML的不同,有时使用负上边距也可以。

Tolgahan Albayrak 17 年前

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