在没有顶部和右侧提及的情况下,css中的位置相对

时间:2016-01-07 12:01:21

标签: html css position css-position

.classname {
       position: relative;
}

在没有右上角和左下角的情况下,在css中的位置相对,

我读到这不会改变任何位置,但在某些网页写位:相对;没有右上角左下方提及,如果我删除“position:relative;”然后位置会改变。 我可以知道“位置:相对;”的确切用法,没有右上角和左下角。

2 个答案:

答案 0 :(得分:3)

这种定位可能是最令人困惑和误用的。它的真正含义是“相对于自身”。如果你在一个元素上设置 position:relative; 但没有其他定位属性(顶部,左边,底部或右边),它根本不会影响它的位置,它将完全如同如果你把它留作位置:静态;但是如果你给它一些其他的定位属性,比如 top:10px; ,它会将它的位置从它正常的位置向下移10个像素。我相信你可以想象,根据它的常规位置移动元素的能力非常有用。我发现自己使用它来多次排列表单元素,这些元素倾向于不想按照我希望的方式排列。

设置位置时还会发生另外两件事:相对;在你应该知道的元素上。一个是它引入了在该元素上使用z-index的能力,这对于静态定位元素并不真正起作用。即使您未设置z-index值,此元素现在也将显示在任何其他静态定位元素的顶部。你不能通过在静态定位的元素上设置更高的z-index值来对抗它。发生的另一件事是它限制了绝对定位的子元素的范围。任何相对定位元素的子元素都可以绝对定位在该块中。

答案 1 :(得分:0)

在父元素上设置位置相对性的最常见用途是将相对于父元素位置设置为绝对位置的子元素定位。