將div定位在另一個div的位置

Question

我試圖將div完全放在另一個上面。 我是通過JQuery（而不是css）來做的，因為我有3個元素。 當鼠標移過其中一個元素時，我希望div將自己定位到該元素。

我終於讓它工作了，但是當div轉到元素時， div會去那里，並向左邊增加8px。

如何將div放在另一個元素的確切位置？

的jsfiddle

 $('.inner').mouseover(function() { var pos = $(this).position(); $("#back").css('left', pos.left + "px"); }); 

 #wrapper { width: 600px; height: 30px; } .inner { display: block; float: left; width: calc(100% / 3); height: 50px; } #back { background-color: yellow; height: 100%; z-index: -1; width: calc(100% / 3); position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div class="inner">First Option</div> <div class="inner">Second Option</div> <div class="inner">Third Option</div> <div id="back"></div> </div> 

Answer 1

.wrapper應該是相對位置而.back應該是絕對位置

 $('.inner').mouseover(function() { var pos = $(this).position(); $("#back").css('left', pos.left + "px"); }); 

 #wrapper { width: 600px; height: 30px; position: relative; } .inner { display: block; float: left; width: calc(100% / 3); height: 50px; background-color: green; } #back { background-color: yellow; height: 100%; z-index: 125; width: calc(100% / 3); position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div class="inner">First Option</div> <div class="inner">Second Option</div> <div class="inner">Third Option</div> <div id="back"></div> </div> 

Answer 2

您可以通過將position: absolute設置為#back元素來消除額外的空間。 DEMO

容易，對嗎？ 但為什么？

當使用position: relative ，如W3schools屬性頁中所述 ：

位置相對的元素; 相對於其正常位置定位 。

默認情況下，所有元素都具有position: static ，這基本上意味着您在文檔中構建元素的位置和方式，這就是它們的位置，它實際上被稱為未 定位 。

當您添加position: relative對於一個元素時，它會獲取當前位置，然后根據您為top ， right ， bottom或left屬性賦予的值進一步增加或減去它的位置（另請注意， static和relative之間的主要區別）是relative可以接受這些屬性，它們不會影響static元素）。

在你的情況你添加屬性left你是從得到一個值position()方法（假設8px喜歡你的第一個例子). That means that ). That means that #back was being a positioned *from* the it's original position, which was already positioned was being a positioned 8px *from* the it's original position, which was already positioned已經from the left (due to the document's *from* the it's original position, which was already positioned 8px from the left (due to the document's填充/邊距）。

為了使元素不受margin或padding影響，您必須將其從position: absolute的文檔流中取出。 使用絕對定位元素不會像static或relative元素那樣“占用文檔中的空間”，因此它不會受父元素的padding或margin屬性的影響。

除非你是100％肯定的，否則沒有父元素將具有影響relative位置的元素的margin或padding值，有時你可以通過不將元素更改為absolute來逃避。

此演示顯示#back元素的position: relative 。

這個演示說明了為什么你應該給它position: absolute （一旦引入填充，一切都變得混亂。

使用相同的padding和position: absolute一切都按預期工作 - DEMO （ 幾乎 ）。

Answer 3

back div should have position absolute to get on other div's.

請找到更新的jsFiddle

Answer 4

添加position: relative對於#wrapper 。

所以#wrapper應該是這樣的：

#wrapper {
    width: 600px;
    height:30px;
    position: relative;
}