Html 图像流出div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8339415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image flow out of div
提问by user319940
I'm trying to achieve an image flowing out of a div. Basically, in my heading I have a fixed width of 960px, the logo image has something coming off of it, which I would like to sit outside that 960px.
我正在尝试实现从 div 流出的图像。基本上，在我的标题中，我有一个 960 像素的固定宽度，徽标图像有一些东西从中脱落，我想坐在 960 像素之外。
Is there a nice clean method of achieving this?
有没有一个很好的干净的方法来实现这一目标？
回答by Jan Dragsbaek
The simple method of doing it (that works in most browsers), is that you make your main wrapper have position:relative, and the make the div (that you want to flow outside) have position: absolute; left: -25px; top: -25px;.
这样做的简单方法（在大多数浏览器中都有效），是让主包装器具有position:relative，并使 div（要流到外面）具有position: absolute; left: -25px; top: -25px;.
Having position:relativeas the wrapper makes the position:absoluterelative inside the parent container.
其position:relative作为包装，使position:absolute父容器内相对的。
回答by SpaceBeers
You could also absolute positioning to achieve this. Quick example below:
您也可以使用绝对定位来实现这一点。下面的快速示例：
回答by Sonal Khunt
put your logo in fixed div and give that div a style overflow:hidden
把你的标志放在固定的 div 中并给那个 div 一个样式 overflow:hidden
回答by Kyle
You can use the positionproperty of CSS to accomplish this:
您可以使用positionCSS的属性来完成此操作：
HTML:
HTML：
<div><p>Some content<img src="http://placehold.it/50x50"></p></div>
CSS:
CSS：
div
{
width: 100%;
height: 175px;
}
div p
{
width: 960px;
margin: 0 auto;
background-color: #333;
height: 175px;
text-indent: 20px;
}
div img
{
position: relative;
right: 140px;
}
回答by Vigrond
Your friend will be overflow:visible.
你的朋友会溢出：可见。
Your containing div will have the 960px width with overflow:visible. Inside, you will have a relatively or absolutely positioned image (you will need to offset 'left' to center it)
您的包含 div 的宽度为 960 像素，溢出：可见。在里面，您将有一个相对或绝对定位的图像（您需要向左偏移以使其居中）
回答by Samich
<div>
<img src="" />
</div>
div { width:300px; height:100px; background:red; margin:100px; }
img { width:100px; height:100px; background:green; margin:-20px 0 0 -20px; }
