定義と使用法
position 属性は、要素の配置タイプを指定します。
説明
この属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロック レベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。
| 默认值： |
static |
| 继承性： |
no |
| 版本： |
CSS2 |
| JavaScript 语法： |
object.style.position="absolute" |
例
h2 要素の配置:
h2
{
position:absolute;
left:100px;
top:150px;
}
TIY
ブラウザのサポート
主要なブラウザはすべて、position 属性をサポートしています。
注: 属性値「inherit」は、Internet Explorer (IE8 を含む) のどのバージョンでもサポートされていません。
可能な値
TIY の例
| 値 |
説明 |
| 絶対 |
| 值 |
描述 |
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
|
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
|
| relative |
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
|
| static |
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit |
规定应该从父元素继承 position 属性的值。 |
静的な配置以外に、最初の親要素を基準にして配置される絶対配置要素を生成します。
要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
|
| 修正済み |
ブラウザ ウィンドウを基準にして絶対配置された要素を生成します。
要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
|
| 相対 |
通常の位置を基準にして、相対的に配置された要素を生成します。
つまり、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。
|
| 静的 |
デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。 |
| 継承 |
は、position 属性の値が親要素から継承される必要があることを指定します。 |
テーブル>
配置: 相対配置 この例では、通常の位置を基準にして要素を配置する方法を示します。配置: 絶対配置 この例では、絶対値を使用して要素を配置する方法を示します。配置: 固定配置 この例では、ブラウザ ウィンドウを基準にして要素を配置する方法を示します。要素の形状の設定 この例では、要素の形状を設定する方法を示します。要素が形状にクリップされて表示されます。 Z-indexZ-index を使用すると、ある要素を別の要素の後ろに配置できます。 Z インデックス 上記の例の要素の Z インデックスは変更されています。
CSS の Position 属性を紹介します
CSS 位置は非常に重要で、次の値があります: 静的、相対、絶対、固定。
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>
静的: 静的な位置決め。位置属性を設定しない場合、デフォルトは静的です。 top、left、bottom、right などの属性は、静的である場合は無効です。これらの属性を使用するには、position を他の 3 つの値のいずれかに設定する必要があります。
相対: 相対的な位置。要素は、静的に配置されたときの位置に調整されます。静的配置で要素に割り当てられたスペースは、そのスペースを埋めるためにその要素に近づくことはありません。しかし、それらは要素の新しい位置から移動することはありません。
絶対: 絶対的な位置決め。たとえば、要素が別の絶対配置要素内にネストされている場合、その要素はその要素を基準にして配置されます。
固定: 位置が固定されました。この要素はブラウザ上の固定位置に設定され、他の要素と一緒にスクロールしません。比喩的に言えば、スクロール バーを上下しても、画面上の固定要素の位置は変わりません。 IE6 はこの属性をサポートしていないことに注意してください。
注: このように、要素が絶対的に配置されると、さまざまな解像度で表示にずれが生じます。この場合、次のような方法で処理できます。 🎜>
