html - 在实际代码中绝对定位的元素不在适当的位置

Question

我试图在 div 中包含 2 个图像和一些文本。我已将其放置在我喜欢的位置，但将其添加到我的网站时，它位于左上角。

我如何才能让它单独位于我其余内容下方的一个 div 中，并且不会移动到我网站的左上角？

我用我的代码创建了一个 fiddle :http://jsfiddle.net/43qahfsn/2/

使用百分比而不是像素会有所不同吗？还是有更好的方法来做到这一点？

#box {
width:1200px; 
height:700px;
}

.text, .stripe, .photo {
position: absolute;
text-align: center;
}

.text {
color:#000;
top: 50px;
left: 250px;
}

.stripe {
z-index: 1;
top: 0px;
left: 0px;
}

.photo {
top: 400px;
left: 600px;
}

Answer 1

您需要相对于其父元素定位绝对定位元素。在您的情况下，将它们包装在 div 中并对其应用 position:relative;。

.container {
    position:relative;
}

<div class="container">
    <!-- your current html  --->
</div>

演示 http://jsfiddle.net/43qahfsn/5/