相對DIV與CSS

的問題不是那麼簡單（因爲你可能會想象）徘徊，看看下面的例子：相對DIV與CSS

的HTML：

Text text text <div id="special-image"></div> special content More text text text text...

我怎麼想在輸出的樣子：

enter image description here

正如你所看到的＃特殊圖像是「懸停」的內容而不接觸它。
我知道，想到的第一件事就是position:absolute;
但你可以在示例圖片中看到的，我想這些div是position:relative到他們設置好的（在HTML）的
區域。並且x，y位置可以從頁面
到頁面不同（它們不一致）。

頁面中的文本應該保持「錨定」在頁面中，我不能給它絕對的位置。主要的一點是，我不希望＃special-image div移動任何文本，只是懸停在那裏。

你會建議我應該怎麼做以達到這種行爲？

在此先感謝。

編輯：
這是一步步接近（感謝@Ross麥克萊倫），
但新創建的div正在推動內容：
http://jsbin.com/isepow/1/
我需要的圖像，而不是橙色背景。

來源

2012-07-26 funerr

如果使父元素相對定位，並且圖像元素絕對定位，圖像將相對於父元素而不是整個頁面定位。如果這就是你的意思......？ – 2012-07-26 16:59:46

不，主要的一點是頁面中的文本應該保持在原來的位置。並且＃特殊圖像應該在沒有「中斷」的情況下懸停在它們上面。 – funerr 2012-07-26 17:01:25

這是可以實現的。看到我的答案。絕對定位的圖像不會干擾文本。 – 2012-07-26 17:03:58

證明我想這可以用一些負面保證金，如果你知道圖像/圖像保持

在IE7中不工作的寬度來實現。 ..

<div>Text text text <div id="special-image" style="display: inline-block; position: relative; top: -15px; left: -15px; width: 40px; margin-right: -40px; background-color: #ff6600;">&nbsp;</div> special content More text text text text... </div>

在Chrome中不工作...

如果一個額外的包裝被允許

替代解決方案：

<div>Text text text <div style="position: absolute; display: inline;"><div id="special-image" style="display: inline-block; position: relative; top: -15px; left: -15px; width: 40px; background-color: #ff6600;">&nbsp;</div></div> special content More text text text text... </div>

外部包裝物保存位置絕對風格。這使得特殊圖像相對地移動，而不會影響頁面

編輯其餘 可能固定在IE7 isssues使用空間。不知道爲什麼，但它是他們在<div>，使用範圍，而不是事實，它看上去很幸福（不移動任何其他文本的，據我可以看到我的測試）

Text text text<span id="special-image" style="position: relative; top: -15px; left: -15px; display: inline-block; width: 40px; margin-right: -40px; background-color: #ff6600;">&nbsp;</span> special content More text text text text...

來源

2012-07-26 17:06:24

它似乎有效，你能解釋一下嗎？ – funerr 2012-07-26 17:09:18

其實，剛剛編輯，因爲我看到我所做的在IE7中不能很好地工作。它現在使用絕對位置，以便＃特殊圖像不會影響文本的其餘部分，但通過省略頂部/左側/右側/底部樣式，它保留在頁面上的位置。然後可以根據需要使用負餘量頂部/左邊來操縱它的位置。我在那裏的前一個例子使用了位置相對於操縱位置和負邊界的權利，所以＃特殊圖像不會影響文本的其餘部分，但正如我所說的，IE7並不滿意這樣做。 – 2012-07-26 17:14:58

不，有一個問題，它「推」頂部的一行文本和底部的一部分，我希望div不會影響頁面（不要將元素向下移動）。 – funerr 2012-07-26 17:21:21

對我來說，不清楚什麼定義了兩幅圖像的位置。如果圖像應接近特殊內容文本，則將此文本與圖像一起放在單獨的div中。然後你可以定位圖像相對於他們的父div。

來源

2012-07-26 17:01:56

如果沒有父分區，該怎麼辦？ – funerr 2012-07-26 17:11:21

然後給它一個。 – 2012-07-26 17:33:32

我不能，那就是整個問題。 – funerr 2012-07-26 17:42:12

是否這樣？

div#special-image{position:absolute;top:-5px; display:inline-block;}

見this作爲概念;-)

來源

2012-07-26 17:02:51 XhkUnlimit

不，我不希望它絕對定位，因爲它會將＃特殊圖像移動到頂部：-5px（文檔），我希望它將鼠標懸停在文本上方。 – funerr 2012-07-26 17:05:02

@ agam360如果父div有一個位置：relative（請參閱我的文章中的證明）它將與該div相關 – XhkUnlimit 2012-07-26 17:05:42

對不起，我誤導了你，我編輯了我的代碼，我沒有那個div（你的容器），抱歉，如果沒有它，它就無法工作。 – funerr 2012-07-26 17:10:30

回答

相關問題