絕對定位的元素在實際代碼中不存在

我試圖將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; 
}

來源

2014-09-23 mango

哪裏的了'float'ing形象？它只是絕對地定位。 – 2014-09-23 22:52:36

爲了將來的參考，我會建議發佈你的線框的截圖，以便其他人可以準確地看到你想要完成的工作。 – JGallardo 2014-09-23 23:44:42

這不是什麼大問題，但是當你有'0px'時，你可以把它寫成'0'。 – JGallardo 2014-09-23 23:46:53

您需要對絕對定位元素相對於其父元素進行定位。在你的情況下，將它們包裝在div中，並將其應用position:relative;。

.container { 
    position:relative; 
}

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

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

來源

2014-09-23 22:57:38 Arbel

任何理由刪除以前的答案？兩者似乎都是一樣的。 – 2014-09-23 22:58:48

啊，這就是我錯過的！感謝那。 – mango 2014-09-23 22:59:32

@HashemQolami在第一個答案中，我假定#box是OP標記中的包裝，事實證明它不是。 – Arbel 2014-09-23 22:59:39

絕對定位的元素在實際代碼中不存在

回答

相關問題