使 div 看起来好像它漂浮在它的容器之外[关闭]答案

【问题标题】：Making a div appear as if it's floating outside of it's container [closed]使 div 看起来好像它漂浮在它的容器之外[关闭]
【发布时间】：2014-02-28 19:48:09
【问题描述】：

我正在尝试让一个 div（其中包含背景图像）看起来漂浮在它的容器之外。我对内容 div 内的图像重叠内容没有意见，但我不希望图像或容器与外面的其他内容重叠。我也不希望图像推动内容。

我正在做的事情看起来很老套，我可以通过设置一堆自定义顶部和底部边距来修复重叠，但我确信有一种更简单的方法来做到这一点。

http://codepen.io/0bsidian/pen/GdwhF

【问题讨论】：

您最好将代码包含在您的问题中；仅通过代码箱的链接，您不会得到很多响应。
也不清楚您要做什么。您不希望重叠或移动东西。
我不明白你想要达到什么目的。你能张贴一张你想要的照片吗？

标签： html css css-float css-position

【解决方案1】：

你需要的可能是box-shadow的想法。

div {
  box-shadow: 2px 2px 5px #333;
}

您可以使用自己的这些参数。通过这种方式，您可以使元素看起来像是漂浮在另一个元素上。

【讨论】：

【解决方案2】：

您将父包装设置为具有position:relative，将任性的子包装设置为具有position:absolute。

这行得通，但你是对的，有一种更简单的方法。只需将子级设置为position:relative，然后确保父级没有overflow:hidden。

您可以只使用边距，而不是使用relative 或absolute：

body {
    background: #444;
}
section {
    width: 600px;
    margin: 6em auto 0 auto;
}
#container {
    margin-top:50px; /*30px would make it touch the <p> above but not overlap, because the image is moved upwards by 30px. 50px gives you a 20px margin.*/
}
#container #image {
    height: 128px;
    width: 128px;
    background: url(http://www.skrenta.com/images/stackoverflow.jpg) no-repeat;
    background-size: contain;
    float:left;
    margin-left:-30px;
    margin-top:-30px;
}
#container #content {
    margin-top:0px;
    padding: 6em 1em 1em 1em;
    border: 2px solid black;
    background: #ccc;
}

<html>
    <body>
        <section>
            <p>Stuff outside of container.</p>
            <div id="container">
                <div id="image"></div>
                <div id="content">
                    <h1>Test One</h1>
                    <p>This is a text box. Insert some text here.</p>
                    <p>More stuff here.</p>
                </div>
            </div>
            <p>Stuff outside of container.</p>
        </section>
    </body>
</html>

【讨论】：