希望CSS列重叠

Question

我搜索了Stackoverflow，发现很多人试图避免在CSS列中重叠，但实际上我被要求让文本和图像重叠。

更新：

更好的图像解释我被要求做的事情，以及我正在使用的代码的链接。谢谢！

^{http://unfetteredletters.com/webdev/twocolumnlayout.jpg}

代码链接： http://unfetteredletters.com/webdev/AF_columnLayout/AF_2columnLayout.html

这可能吗？

Answer 1

您可以使用负边距执行此类操作。

看看这个：http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

#content {margin-right:-100px;}

Answer 2

要回答你的问题，是的，这是可能的。

要回答您没有提出的问题，您可以将图像设为背景图像。

Answer 3

你需要设置你的图像的包含块和divs css属性显示是相对的。然后将要重叠显示属性的子项设置为绝对值。现在，您可以使用适当的像素在左上角或左上角放置它们。但是你真的需要提供你的CSS风格，以便你可以轻松地给出答案。

Answer 4

我唯一能想到的是在图像上使用负边距。但只有当您将第一个图像放在第二个容器中并且知道图像的高度时，它才有效。所以对于你的例子它很好，但它不是一个适合所有可能性的解决方案。

<强> HTML

<div>
    [TEXT]
</div>

<div>
    <img src="[URL]" alt="[ALT]">
    [TEXT]
</div>

<强> CSS

height，width和margin值只是示例值。

div {
    float: left;
    width: 300px;
    margin: 0 20px 0 0;
    vertical-align: top;
}

div:nth-child(1) {
    padding: 250px 0 0 0;
}

img {
    float: left;        
    width: 350px;
    margin: 0 0 0 -320px;
}

<强>演示

Try before buy