css - 不懂CSS绝对位置和相对位置

Question

我目前正在学习 CSS，但在定位 Relative 和 Absolute 时遇到了困难。我知道这两个属性用于定义我们希望放置元素的确切位置，但是我不明白的是什么时候我们可以使用 Margins 和 Paddings 来定义这些元素的位置，为什么需要仍然使用绝对和相对，因为它完全没有意义。

我想强调的一个很好的例子是这里 http://www.w3schools.com/css/tryit.asp?f ...我们可以替换 position: absolute;带 float :对；它实现了完全相同的结果，那么我们还在用相对和绝对位置做什么？

Answer 1

position:relative

• makes sure that an element is positioned relative to it's normal position
• the element will not be deleted out of the normal document flow
• it maintains the reserved space and may overlay other elements

position:absolute

• is positioned relative to it's first parent who has another position than position:static
• if such a parent doesn't exists, then the containing block will be the html element
• the element will be deleted out of the normal document flow. The other elements will act as if the element doesn't exist.
• can overlay other elements

position:relative 的示例 css 代码:

selector{
  position: relative;
  left: 150px;
  top: 50px;
  }

position:absolute 的示例 css 代码:

parentselector{
  position: relative;
  }

selector{
      position: absolute;
      left: 150px;
      top: 50px;
      }

padding 和 margin 与其元素的确切位置无关。