不了解CSS绝对和相对位置

Question

我目前正在学习CSS，而我却陷入了相对和绝对的定位。我知道这两个属性用于定义我们想要放置项目的确切位置，但是我不明白的是当我们可以使用边距和填充来定义这些项目的位置时，为什么会有仍然需要使用Absolute和Relative，因为它完全没有意义。

我想强调的一个好例子是http://www.w3schools.com/css/tryit.asp?f ...我们可以替换position：absolute;与浮动：对;它实现了完全相同的东西，那么我们仍然在做相对和绝对的位置呢？

Answer 1

职位：相对

  

  
• 确保元素相对于其正常位置
  
• 该元素不会从正常文档流程中删除
  
• 它维护保留空间并可能覆盖其他元素
  

职位：绝对

  

  
• 相对于它的第一个父级而言，其位置不是位置：静态
  
• 如果这样的父母不存在，那么包含的块将是html元素
  
• 该元素将从正常文档流程中删除。其他元素将表现为元素不存在。
  
• 可以覆盖其他元素
  

位置的示例css代码：relative：

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

位置的示例css代码：absolute：

parentselector{
  position: relative;
  }

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

填充和边距与其元素的确切位置无关。

Answer 2

http://learnlayout.com/position.html包含有关position属性的完整摘要。

• static是position属性的默认值。
• relative与static的行为相同，除非您添加一些额外的属性，将元素移出常规位置。
• fixed元素相对于视口定位，这意味着即使滚动页面，它也始终保持在同一位置。
• absolute的行为与fixed相似，但相对于最近的定位祖先而不是相对于视口。如果绝对定位的元素没有定位祖先，它会使用文档正文，并且仍然随页面滚动一起移动。记住，＆＃34;定位＆＃34; element是一个除static以外的任何位置的元素。

它附带的示例可以帮助您在勤奋地遵循它们的情况下理解它。