0

css の position 属性の正確な機能と、「相対」と「絶対」の 2 つの値の違いを教えてください。次のコードのコンテキストで教えてください:
私は絶対的な位置にいます 

<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 またはその要素をドキュメントの上に浮かせます。現在のドムまたはあなたがそれを呼ぶものに従う必要はありません。

単に使用しposition: relative;ているときは、div をどこにも配置していません。しかし、相対divがない場合、実際には他の要素の相対ポイントを作成しているだけで、相対position: absolute;としてドキュメントをたどります。

あなたのCSSから：

コンテンツでは、CSS#homeに従うことで相対的になり、#home articleその上に配置されます。どこにでも置きたい場所。同様#about articleに の上に配置され#aboutます。

これを書くまで、absoluteまたはこれの主なアイデアが何であるかを理解することはできません。これにより、これに似た上部からすべてのマージンが削除されます。必要なだけ div を移動することもできます。relativetop: 0;margin-top: 0;

ポジショニングを使用すると、DOM（またはそれが何であれ）に従わなくても、要素を移動できます。それらの基本的な違いは、相対がその要素の子の配置が開始される主要な場所または主要なポイントになることです。そして絶対は最も近い親に続き、新しい位置を取得します。

ここでそれらについて学んでください：

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 に答える