如何在移動相對定位的元素後避免空格？

我在<div>內有<article>元素，article有position: relative;。我把它移動了95px（bottom: 95px;），但它佔據原始位置的空間仍然存在。我怎樣才能讓它消失？當我將article與絕對定位相同時，沒有問題。但我需要堅持到中間，margin: auto將不會與position:absolute。如何在移動相對定位的元素後避免空格？

http://jsfiddle.net/xnvMD/2/

來源

2013-05-11 godzsa

你雖然描述你的問題，這是極大的讚賞能夠看到一些代碼。考慮添加一些代碼，以便您的問題具有更高的價值。從你所描述的，嘗試給''div''風格的位置：絕對' – 2013-05-11 14:21:09

告訴我們一些視覺。 – 2013-05-11 14:21:28

jsfiddle的例子嗎？ – hjpotter92 2013-05-11 14:21:30

我有內部的<div>和article具有position: relative;一個<article>元件。我把它移動了95px（bottom: 95px;），但它佔據原始位置的空間仍然存在。

那麼，這是定位如何親戚是應該工作 - http://www.w3.org/TR/CSS21/visuren.html#choose-position：

「當一個盒子B相對位置，下面的方框的位置，就好像乙組份計算不能抵消。」

因此，通過一個相對定位ELE所需的原空間得到儲備。

我該如何讓它消失？當我將article與絕對定位相同時，沒有問題。但我需要堅持到中間，margin: auto將不會與position:absolute。

您是否嘗試過僅使用負數margin-top來向上「移動」元素？這應該適用於所有瀏覽器（不是石器時代）。而且您仍然可以將水平邊距設置爲auto以使您的元素居中。

.trdown { 
    /* everything else besides position and bottom stays */ 
    margin:-85px auto 0 auto; 
}

（如果這會破壞在要保持容器元素的底部的距離，然後給一個padding-bottom爲好。）

來源

2013-05-11 14:32:03 CBroe

負邊距對我來說不起作用：http://jsfiddle.net/xnvMD/3/ – godzsa 2013-05-11 14:39:34

這不是負邊距本身的問題 - 這是因爲'z-index'只適用於定位元素（這意味着， 'position'有一個與默認'static'不同的值，因此保持'position：relative'也是如此，只是沒有'bottom'值：http://jsfiddle.net/xnvMD/4/ – CBroe 2013-05-11 14:44:13

而且，我一直都在看 - 但通常不需要太高的z-index值（我知道大多數開發人員將它們設置得很高，只是因爲他們還沒有完全理解z-index是如何工作的） - 「z-index：1」是（至少在這個簡單的例子中），請參閱http://jsfiddle.net/xnvMD/5/一旦在該路徑上，如果您正在使用具有不同z-索引的幾個定位元素，問題會不斷增加 - 「所以我之前在那個元素上使用了'2000'，所以對於下一個我至少需要'2001'，但是我會讓它成爲'30 00'，只是爲了確保「......不這樣做，這很糟糕。 – CBroe 2013-05-11 14:46:14

我沒有足夠的聲譽添加評論沒有事先添加一個答案。沒有看到像Cody這樣的代碼添加它很難提供幫助。

我認爲你不完全確定定位是如何工作的。當一個元素被設置爲絕對位置時，它被定位在它所具有的沒有位置的第一個父元素：static。如果不存在這樣的元素，則位置爲absolute的元素相對於<html>（來自Codecademy）被定位

如果給元素相對定位並告訴它具有10px的margin-top，則它不會向下移動來自任何特定事物的十個像素 - 它從原來的位置向下移動十個像素。

請記住，如果您在另一個元素內部的元素上使用margin-auto，它將位於該元素內部，而不是文檔。 Div的默認值是頁面的整個寬度。

來源

2013-05-11 14:28:32 Senjai

而不是相對位置，使用負頂部邊距。事情是這樣的：

margin:-95px auto 0 auto;

正如CBroe已經指出，要得到箭頭在圖像上顯示上面，你需要重新添加position:relative（但不是bottom）當您設置的z-index 。

position:relative; 
z-index:1;

從技術上講，你甚至不需要z-index。

如果您很好奇它爲什麼會如此工作，您需要了解CSS中繪畫順序的規則。 full details相當複雜，但在the section on the z-index property中概述了基本知識。

在每個堆疊上下文中，下列各層塗在後端到前序：

背景和形成堆疊環境的元素的邊界。

孩子堆疊負面堆棧級別的情況下（最負面的第一個）。

流入式，非內聯式，非定位後代。

非定位花車。

流入內聯級別的未定位後代，包括內聯表和內聯塊。

子堆疊堆棧級別爲0的上下文以及堆棧級別爲0的定位後代。

子堆疊正堆棧級別（最不積極優先）的上下文。

默認情況下，圖像（其歸類爲行內，非定位後代）是在第5級，這是您的article元件（非內嵌級後代）在上述3.

水平

通過添加postion:relative到article元件，則找到了一個定位後代，第6級，並因此再次移動它更高堆棧和圖像上方。

請注意，如果您article曾裝過任何自己的在線內容，這將有img元素（它們都是內聯，但文章的在線內容是後話在樹順序）上面顯示，但article背景邊界仍然會畫在下面。

來源

2013-05-11 14:31:32

如果我使用這個，三角形消失，嘗試z-index，沒有幫助：http：// jsfiddle .net/xnvMD/3/ – godzsa 2013-05-11 14:38:36

我看到CBroe已經回答了你，但我已經更新了我的答案。 – 2013-05-11 14:52:40

如何在移動相對定位的元素後​​避免空格？

回答

相關問題

如何在移動相對定位的元素後避免空格？