html – 将图像放在其容器之外

我有一个很大的头痛,试图获得一个包含在一个div内的图像,看起来漂浮在其包含的元素之外.

虽然我很确定这是不可能的,但我想确定我已经用尽所有的途径,然后告诉设计师和客户,他们不会让它看起来完全按照设计规范.

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

结果我目前可以实现looks like this.如您所见,如果您尝试将图像定位超出其定义的边距,它将“重叠”下滑动.

我已经尝试了绝对的定位,浮动和其他任何想法.我受到< h1>的边缘限制元素,您可以在第一个屏幕截图中看到最后几个字母.

可根据要求提供代码/ CSS.大巧克力鱼,谁告诉我,这实际上可以实现和如何.

代码段：
HTML

<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.

CSS

.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;
}

解决方法

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

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

其中,-X要把它从DIV中偷走就需要很多.

如果这不行,我还有其他一些想法,但我一定会看到你的HTML,所以我可以轻松地在Firebug上玩弄它.

编辑：你发布的html不够真实,因为看到代码的整个观点是能够有一个副本,你可以轻松地尝试与Firebug等等.但是,我明白你的犹豫/无能力将整个页面张贴在这里.无论如何,我不会使用< span>为了显示图像,我只是使用一个实际的图像. It worked fine for me.

原文地址：https://www.jb51.cc/html/231204.html