html絕對和相對於彼此的偏移

我有和問題使用一個外部鏈接的CSS控制的樣式的HTML文檔。我在本地渲染並嘗試了Chrome和Firefox。html絕對和相對於彼此的偏移

這個問題是這樣的：

我都隨高度和（我把顏色的方塊到網頁）的200像素寬度值的兩個<div>元素。但是他們的位置屬性值不同。一個人的「絕對」是另一個人的「親屬」。我基本上試圖把兩個盒子放在一起。例如（在css文件中）

#item1{position: absolute; left:300px; top: 300px; z-index: 1;} 

#item2{position: relative; left:300px; top: 300px; z-index: 2;}

item2將從項目1偏移8個像素，向下和向右。

我試着將item2上的所有邊距（和填充）設置爲零，但沒有奏效。

謝謝！

來源

2017-02-11 painter

「絕對」和「相對」做了不同的事情，目前還不清楚爲什麼你在這裏使用一個，而不是你想要達到的目標。此外，你應該包括你的HTML - 最好作爲一個片段（見工具欄上的按鈕） – CupawnTae

（但你可能想嘗試在你的'body'上設置邊距和填充爲零） – CupawnTae

@Uday這是不正確的 - 對於'相對「元素，」頂「和」左「是相對於元素自身的正常位置，這與」絕對「的工作方式不同，但它們確實有效。 – CupawnTae

-1

獲取到LearnLayout.com/position.html馬上理解和解決這個問題。然後通讀整個網站（不會花費很長時間，你會感謝我） - 這是我見過的最令人沮喪的關於CSS的最佳網站。從長遠來看，它會爲您節省數小時和數天的時間。

來源

2017-02-11 14:07:43 jotasprout

是的，我感謝你。我需要的解決方案（以及更多）在網站上。我通過創建body {margin; 0;}。它排列起來。謝謝！ – painter

你很受歡迎@painter。相當困惑的是答案被標記爲正確的，但得分爲負。 – jotasprout

您需要爲兩個div使用position: absolute;。

嘗試改變ITEM2到：

#item2{position: absolute; left:308px; top: 308px; z-index: 2;}

來源

2017-02-11 13:55:06 Sean

感謝您的回覆，您的解決方案確實能夠按照我想要的方式調整元素。但是我不滿意，因爲原來的行爲（即保持左：300px）沒有按預期執行。這對我來說是一個學習練習。謝謝！ – painter

不客氣！你能接受它作爲答案嗎？ :) – Sean

其實，以前的答案指向我LearnLayout.com/position原來是我正在尋找的（解決更大的問題爲什麼兩個位置爲300的位置相互偏移的元素）。我很抱歉，因爲這是我第一次（如果不是第一個）我在這裏發佈在stackoverflow上的問題之一，並沒有接受前面的答案，因爲我不完全確定它是如何工作的。非常感謝您的時間和您的評論。 – painter

如果您想要將一個div放在另一個div的上面，則兩個div都必須放在絕對位置。

來源

2017-02-11 14:11:42 catapultedplastic

不幸的是，我正在處理的問題的參數需要一個div是絕對的，另一個是相對的。謝謝！ – painter

html絕對和相對於彼此的偏移

回答

相關問題