为什么位置:相对使用顶部向下移动而底部向上移动?

时间:2015-10-29 03:08:51

标签: css css-position

为什么CSS position: relative;使用bottom向上移动,使用top向下移动,left向右移动,right向左移动?

小提琴click me

我是否错误地使用position: relative;,或者这是某种我不知道的术语?

5 个答案:

答案 0 :(得分:2)

元素相对于其正常位置定位,因此“left:20”将20个像素添加到元素的LEFT位置 find out more about the position property here (w3schools)

此外,你也可以使用负数,以便将你可以使用的元素左移20px:

left:-20px

答案 1 :(得分:0)

这是一些“我不知道的术语”,用你自己的话说。当您指定其中一个值时,您将指定从该侧移动的距离。因此,例如,当您指定top:10px时,您会说“将其从顶部移开10px”。我认为你只是误解了你认为它走向了那一边,但它并不完全是如何运作的。这不仅适用于position:relative,也适用于absolutefixed,以及其他任何位置值

答案 2 :(得分:0)

它的工作正常。请阅读这篇文章http://www.webdevdoor.com/html-css/css-position-child-div-parent,但请尝试更改位置值ex 20,30,40 instead of 10

答案 3 :(得分:0)

要理解这一点,首先让我们看一下position: relative属性/值。

直接从w3schools

  

位置为相对的元素;相对于其正常位置定位。

     

设置相对定位元素的顶部,右侧,底部和左侧属性将使其从正常位置调整远离。其他内容不会被调整以适应元素留下的任何空白。

理解这一点的一种方法是,当您将left这样的属性设置为具有relative定位的元素时,您设置的值是远离与其正常的距离它的位置。因此,将left设置为20px的值会使 20px远离从正常left位置移动。正整数会将其移至,负数将移至 left Fiddle

或者,w3schools更好:

  

对于相对定位的元素,left属性将元素的左边缘设置为左/右单位到正常位置。

我的上述描述可能并非正确,但它帮助我在开始时理解它。

答案 4 :(得分:0)

简单地说,它将元素x从指定的方向定位x像素。