Html IE8韩元'；不要将图像放在div上

我正在开发一个简单的CSS和HTML网站，尝试一些东西

我想让一个图像漂浮在div上。类似这样：

    <div id="big_container">
        <img id="img1" src="images/fun.png"/>
        <div id="some_container"></div>
    </div>

这样做的目的不是将

img

放在

some\u容器

div上，而是将其放在图像的前面和后面，在图像的下面，将

some\u容器

div放置

如何使图像漂浮在div上？Firefox和Chrome可以正确显示它。IE8没有

编辑

---

Kyle Sevenoaks说，我尝试删除了

相对的

和

左侧的

。但它仍然显示在div上方，并且不重叠。

您可以使用position:absolute；要使其显示在所需的div上，请执行以下操作：

#img1{ width: 69px; height: 200px; position: absolute; left: 200px;}​

编辑

我忘了提到你应该加上

position:relative到父div

您可以使用位置：绝对；要使其显示在所需的div上，请执行以下操作：

#img1{ width: 69px; height: 200px; position: absolute; left: 200px;}​


编辑

我忘了提到你应该加上
position:relative到父div

浮动元素不会将其置于同一父元素中其他元素的顶部。您还尝试在相对定位的元素上使用“左”CSS值。“浮动”适用于相对定位的元素，“左”适用于绝对和固定定位的元素

这是您的CSS，用于将“img1”放置在“some_容器”（包括边距声明的缩写）的顶部。注意“位置：相对”；应用于父级“大容器”

现在，您将看到IE8在这里没有错。其他浏览器可能对您很友好，忽略了任何冲突的CSS声明，以获得所需的结果。IE8不太复杂，可能没有对CSS进行补偿，也没有照字面理解CSS。
浮动元素不会将其置于同一父元素中其他元素的顶部。您还尝试在相对定位的元素上使用“左”CSS值。“浮动”适用于相对定位的元素，“左”适用于绝对和固定定位的元素

这是您的CSS，用于将“img1”放置在“some_容器”（包括边距声明的缩写）的顶部。注意“位置：相对”；应用于父级“大容器”

现在，您将看到IE8在这里没有错。其他浏览器可能对您很友好，忽略了任何冲突的CSS声明，以获得所需的结果。IE8不太复杂，可能没有对CSS进行补偿，也没有从字面上理解CSS。
我认为你应该去学习浮动和定位。你只需要一个。不是两者都有。嗯，我想把图像放在div上面，然后把它放在左边一点。无论如何，如果我删除position属性，它仍然不能正确显示它仍然有效。你有你想要实现的图表吗？试着添加
z-index:9999在你
#img1
css@kakarott：z-index继承自父级，这将是无用的。我认为您应该去了解浮动和定位。你只需要一个。不是两者都有。嗯，我想把图像放在div上面，然后把它放在左边一点。无论如何，如果我删除position属性，它仍然不能正确显示它仍然有效。你有你想要实现的图表吗？试着添加
z-index:9999在你
#img1
css@kakarott：z-index从父级继承，这将是无用的。嗯。这很有效。但是它相对于标记定位它，而不是它的第一个父对象，即
big\u container
。调整窗口大小时，图像会移动：（嗯，那么你可以将position:relative；添加到容器中。但这就是你想要的效果，是吗？O.O有效。现在，请向我解释一下，如果你愿意的话……为什么它与父容器相对工作，为什么没有它……嗯。这很有效。但是它相对于标记定位，而不是它的第一个父容器，
big\u container
。调整窗口大小时，图像会移动：（嗯，那么你可以将position:relative；添加到容器中。但这就是你想要的效果，是吗？O.O有效。现在，向我解释一下，如果你愿意的话……为什么它与父容器相关，为什么没有它……绝对定位的元素从第一个div容器的0px顶部和0px左侧开始定位h是相对定位的。在您的情况下，这是或可能是页面上的第一个div容器。将position:relative应用于父级非常有用，只要您将position:absolute应用于父级；将position:absolute应用于div-只是出于理智的原因；）某些浏览器会假定父级是相对的，而其他浏览器则不会。绝对定位元素从相对定位的第一个div容器的0px顶部和0px左侧开始定位。在您的情况下，这是或可能是页面上的第一个div容器。每当您应用position:relative；时，将position:relative；应用于父级非常有用y位置：绝对；对于div-只是出于理智的原因；）一些浏览器会认为父级是相对的，而其他浏览器则不会。
#big_container{ width: 960px; height: 270px; margin: 42px auto 0; position:relative;}
#some_container{ width: 100%; height: 198px; border: 1px solid #CCC;}
#img1{ width: 69px; height: 200px; position: absolute; left: 200px; top:0px; }