html5のポジションを深く理解する

CSSのPositionは非常に重要で、Positionには

static、relative、absolute、fixedの合計4つの属性値があります。

要素の位置は「left」、「top」、「right」、「bottom」属性によって指定され、表示レベルは z-index によって制御されます。

static: 静的な位置決め。位置属性を設定しない場合、デフォルトは静的です。 top、left、bottom、right などの属性は、静的である場合は無効です。これらの属性を使用するには、position を他の 3 つの値のいずれかに設定する必要があります。

relative: relative 要素は通常のドキュメント フローに従います。そのため、relative 要素はその存在を無視しません。top、bottom、 left 、right およびその他の属性。 top、bottom、left、right およびその他の属性を使用して relative 要素を相対的に配置すると、その効果は margin 属性ですが、違いは、<code>relative 要素を囲む要素が relative 要素の動きを無視することですrelative 元素遵循正常的文档流，所以周围元素不会忽略它的存在，relative 元素同样支持 top,bottom,left,right等属性。当我们使用 top,bottom,left,right等属性对 relative 元素进行相对定位时的效果有点类似于 margin 属性达到的效果，但是区别在于， relative 元素周围的元素将会忽略 relative 元素的移动

# p 
{
background:#ccc; width:200px; height:200px;
position:relative; left:200px; top:200px
}

absolute：absolute 元素将会脱离正常的文档流，所以 其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时，我们可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性，top 或 bottom,left 或 right。

# p 
{
background:#ccc; width:200px; height:200px;
position:absolute; left:200px; top:200px
}

fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

首先，fixed 元素定位与它的父元素无任何关系，它永远是相对最外层的 window 进行定位的。
第二，fixed

# p 
{
background:#ccc; width:200px; height:200px;
position:fixed; left:200px; top:200px
}

absolute: absolute この要素は通常のドキュメント フローから取り出されるため、その存在は周囲の要素によって無視されます。 absolute 要素の display 属性が none に設定されているかのように。現時点では、top、bottom、left、right などの属性を使用して、absolute 要素を絶対的に配置できます。一般に、top またはbottom、left または right という 2 つの属性が定義されます。 rrreee

🎜🎜🎜🎜🎜🎜fixed: 位置を修正しました。この要素はブラウザ上の固定位置に設定され、他の要素と一緒にスクロールしません。比喩的に言えば、スクロール バーを上下しても、画面上の固定要素の位置は変わりません。 IE6 はこの属性をサポートしていないことに注意してください。 🎜🎜🎜🎜まず、fixed 要素の位置は、その親要素とは何の関係もありません。常に、最も外側の window を基準にして配置されます。 🎜🎜🎜 2 番目に、fixed 要素はその名前の通り、画面上の特定の位置に固定され、画面のスクロールによって消えることはありません。 🎜🎜rrreee🎜🎜🎜🎜🎜🎜🎜position属性はCSSレイアウトにおいて非常に重要であり、将来p plus CSSを学習する際に非常に役立ちます🎜🎜。

以上がhtml5のポジションを深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。