Question

你能告诉我css中position属性的确切功能和两个值的差异，即“relative”和“absolute”。请在以下代码的上下文中告诉我：
我绝对定位

<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相对。绝对将基本上使div或该元素浮动在文档上方。无需遵循当前的dom或你所说的。

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

来自您的css：

在您的内容中，通过关注CSS #home将是相对的，#home article将被置于其上。你想放哪个地方。同样#about article将放在#about上。

你不会弄清楚absolute或relative的主要想法，直到你写下这个：top: 0;这将删除顶部的所有边距，与此{{1}相似1}}。您也可以尝试根据需要移动div。

定位只是让你移动元素而不必遵循dom（或其他任何东西）。它们之间的基本区别在于，相对将是从该元素的子元素开始放置的主要位置或主要点。绝对会跟随最近的父母，并将获得一个新的职位。

在此处了解相关信息：

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

W3school.com：http://www.w3schools.com/css/css_positioning.asp（如果你想学习基础知识）。

CSS-Tricks：http://css-tricks.com/almanac/properties/p/position/

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

CSS中的position属性

1 个答案: