css - CSS 中的位置属性

Question

你能告诉我 position 属性在 css 中的确切功能以及两个值(即“相对”和“绝对”)的区别吗？请在以下代码的上下文中告诉我:
我是绝对定位

<section id="about" data-type="background" data-speed="10" class="pages">
     <article>Simple Parallax Scroll</article>
</section>

#home { 
  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
}

#home article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}

#about { 
  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

#about article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}

也希望“-webkit-box-shadow”属性能正常工作。

Answer 1

有什么区别:

当您使用位置 relative 时，您创建的 div 将相对于位置为 absolute 的其他 div。 Absolute 基本上会使 div 或该元素 float 在文档上方。无需遵循当前的 dom 或您所说的。

当您只是使用 position: relative; 时，您并没有将 div 放在任何地方。但如果没有相对 div，您实际上只是为其他元素创建一个相对点 position: absolute; 将作为相对跟随文档。

来自您的 CSS:

在您的内容中，通过遵循 CSS #home 将是相对的，#home article 将被放置在它上面。你想把它放在哪里。同样，#about article 将被放置在 #about 之上。

你不会弄清楚absolute 或relative 的主要思想是什么，直到你写下这个:top: 0; 这将删除顶部的所有边距都类似于此 margin-top: 0;。您也可以尝试尽可能多地移动 div。

定位只是让您移动元素而不必跟随 dom(或任何它是什么)。它们之间的基本区别在于，relative 将是该元素的子元素开始放置的主要位置或主要点。 absolute 将跟随任何最近的 parent 并获得新职位。

在此处了解它们:

Mozilla 开发者网络:https://developer.mozilla.org/en-US/docs/Web/CSS/position

W3school.com:http://www.w3schools.com/css/css_positioning.asp (如果您想学习基础知识)。

CSS 技巧:http://css-tricks.com/almanac/properties/p/position/

W3.org:http://www.w3.org/wiki/CSS/Properties/position