Question

我正在尝试将2张图片和一些文字包含到div。我按照我喜欢的方式定位，但是当它添加到我的网站时，它位于左上角。

我如何获得它，以便它在我的其余内容中独立存在于div中并且不会移动到我网站的左上角？

我创建了一个代码：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/

在实际代码中，绝对定位的元素不到位

1 个答案: