html放照片的容器,html – 将图像放在其容器之外

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

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

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

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

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

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

代码段：

HTML

Contact Us

Unrelated stuff...

International Contacts

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

}