[英]Position div at position of another div
I am trying to position an div
exactly on top of another. 我试图将
div
完全放在另一个上面。 I'm doing it through JQuery (and not css), because I have 3 elements. 我是通过JQuery(而不是css)来做的,因为我有3个元素。 When the mouse goes over one of the elements, I want the
div
to position itself to that element. 当鼠标移过其中一个元素时,我希望
div
将自己定位到该元素。
I finally got it to work, but when the div
goes over to the element, the div
goes there, and adds 8px to the left. 我终于让它工作了,但是当
div
转到元素时, div
会去那里,并向左边增加8px。
How can I position a div
at the exact position of another element? 如何将
div
放在另一个元素的确切位置?
$('.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>
.wrapper should be relative position and .back should be absolute position .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>
You can get rid of the extra space by setting position: absolute
to the #back
element. 您可以通过将
position: absolute
设置为#back
元素来消除额外的空间。 DEMO DEMO
Easy, right? 容易,对吗? But why?
但为什么?
When using position: relative
, as stated in the W3schools property page : 当使用
position: relative
,如W3schools属性页中所述 :
An element with position: relative;
位置相对的元素; is positioned relative to its normal position .
相对于其正常位置定位 。
By default all elements have position: static
, which basically means that where and how you construct your elements in your document, that's where they will be and it's really referred to as not being positioned . 默认情况下,所有元素都具有
position: static
,这基本上意味着您在文档中构建元素的位置和方式,这就是它们的位置,它实际上被称为未 定位 。
When you add position: relative
to an element, it takes it's current position and then adds or subtracts it's position further depending on what values you gave to the properties top
, right
, bottom
or left
(also note, the major difference between static
and relative
is that relative
can accept these properties, they won't affect a static
element). 当您添加
position: relative
对于一个元素时,它会获取当前位置,然后根据您为top
, right
, bottom
或left
属性赋予的值进一步增加或减去它的位置(另请注意, static
和relative
之间的主要区别)是relative
可以接受这些属性,它们不会影响static
元素)。
In your case you were adding the property left
with a value you were getting from the position()
method (let's say 8px
like your first example ). That means that
在你的情况你添加属性
left
你是从得到一个值position()
方法(假设8px
喜欢你的第一个例子). That means that
). That means that
#back was being a positioned
8px *from* the it's original position, which was already positioned
8px from the left (due to the document's
padding /
margin`). ). 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
填充/
边距)。
In order to make the element not be affected by margin
or padding
you have to take it out of the document flow with position: absolute
. 为了使元素不受
margin
或padding
影响,您必须将其从position: absolute
的文档流中取出。 With absolute positioning the element won't "take up space" in the document like a static
or relative
element will, so it won't then be affected by parent elements' padding
or margin
properties. 使用绝对定位元素不会像
static
或relative
元素那样“占用文档中的空间”,因此它不会受父元素的padding
或margin
属性的影响。
Unless you are 100% positive no parent elements will have margin
or padding
value that will affect the element that is positioned relative
then sometimes you can get away with not changing the element to absolute
. 除非你是100%肯定的,否则没有父元素将具有影响
relative
位置的元素的margin
或padding
值,有时你可以通过不将元素更改为absolute
来逃避。
This demo shows the #back
element with position: relative
. 此演示显示
#back
元素的position: relative
。
This demo shows why you should give it position: absolute
(once padding is introduced, everything gets messy. 这个演示说明了为什么你应该给它
position: absolute
(一旦引入填充,一切都变得混乱。
With that same padding
and position: absolute
everything is working as intended again- DEMO ( pretty much ). 使用相同的
padding
和position: absolute
一切都按预期工作 - DEMO ( 几乎 )。
back div should have position absolute to get on other div's.
请找到更新的jsFiddle
Add position: relative
to #wrapper
. 添加
position: relative
对于#wrapper
。
So #wrapper
should look like: 所以
#wrapper
应该是这样的:
#wrapper {
width: 600px;
height:30px;
position: relative;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.