0

你能告诉我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”属性。

4

1 回答 1

2

有什么区别：

当您使用 position 时relative，您正在制作一个相对于其他具有 position 的 div 的 div absolute。Absolute 基本上会使 div 或该元素浮动在文档上方。无需遵循当前的 dom 或您所称的。

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

从你的CSS：

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

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

定位只是让您移动元素而无需遵循 dom（或任何它）。它们之间的基本区别在于 relative 将是该元素的子元素的放置开始的主要位置或主要点。absolute 将跟随任何最近的父级并获得一个新位置。

在这里了解它们：

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 _

于 2013-09-22T05:09:23.613 回答