CSS位置の使い方

階層的な絶対位置決めにはpositionをよく使いますが、CSSでposition属性を上手に使いこなすにはどうすればよいでしょうか?今日私たちはそれを皆さんと一緒に勉強するためにここに来ました。

位置の構文と構造

位置の構文:

position : 静的絶対相対

position パラメータ:

static : 特別な位置決めなし、オブジェクトは HTML の位置決め規則に従います

absolute : オブジェクトをドキュメントフローの外にドラッグします, 絶対位置を指定するには、左、右、上、下などの属性を使用します。そして、そのカスケードは CSS z-index 属性を通じて定義されます。現時点では、オブジェクトには余白はありませんが、パディングと境界線はまだあります。

相対: オブジェクトは積み重ねることはできませんが、左、右、上、下、その他の属性に基づいて通常のドキュメント フロー内でオフセットされます。

位置の説明:

設定 オブジェクトの配置方法により、レイアウトレイヤーを簡単に絶対的に配置し、ボックスオブジェクトをより正確に制御できます。

position の実際の使用法

絶対的な配置位置は、レイアウト内にいくつかの小さなオブジェクトがある場合に、相対的な配置に CSS padding を使用するのは簡単ではありません。絶対配置を使用すると、それを簡単に行うことができます。特に、ボックス内に複数の小さなボックスを不規則に配置する場合、位置絶対配置を使用してオブジェクトを配置すると非常に便利です。

絶対位置指定のデモは、写真や不規則なレイアウトに適しています。

絶対位置指定と float を同時に使用することはできません。絶対配置を使用するものと、CSS を使用するものがあります。そのため、IE6 ブラウザーでは、より大きなオブジェクト内で絶対配置と相対配置が表示されません。これは、混同しないように注意してください。彼ら。

絶対位置決めの使用条件

position:absolute;position:relative絶対位置決めの使用は通常、親がposition:relative位置決めを定義し、子がposition:absolute絶対位置決め属性を定義し、子がleftまたはrightとtopまたはを使用します。下部 絶対位置決め。

.div{position:relative} 定義、通常は CSS 幅と CSS 高さを定義するのが最善です

.div-a{position:absolute;left:10px;top:10px} これは、の左側からの距離を定義します親は 10px、親の上からの距離は 10px

または

.div-a{position:absolute;right:10px;bottom:10px} ここでは、親の右からの距離が 10px であると定義されていますは 10px、親の下からの距離は 10px です

HTML 構造に対応します

<div class="div">
    <div class="div-a"></div>
</div>

このように、「div-a」は親の「div」ボックス内に絶対に配置されます。

左 (左) と右 (右) はオブジェクトの定義を 1 つだけ選択でき、下 (下) と上 (上) もオブジェクトの定義を 1 つだけ選択できることに注意してください。

位置の適用例

ここでは、一番外側のボックスのCSSの境界線を赤、CSSの幅を400px、CSSの高さを200pxに設定します。内部に2つのボックスがあるので、絶対位置を使用します。これら 2 つのボックスの場合、最初のボックスの CSS の名前は「div-a」、幅は 100 ピクセル、背景色は黒、高さは 100 ピクセル、親からの配置距離は 10 ピクセルです。左は 10 ピクセル、2 番目のボックスの CSS クラスの名前は「div-b」、幅と高さはそれぞれ 50 ピクセル、CSS の背景色 は青、親の下部からの距離は 13 ピクセルです。親の右からの距離は 15px です。

1. CSSコードは次のとおりです

<style> 
.div{ position:relative;width:400px;height:200px; 
border:1px solid #000} 
/* 定义父级position:relative 为就认为是绝对定位声明吧 */ 
.divc-a{ position:absolute;width:100px;height:100px; 
left:10px;top:10px;background:#000} 
/* 使用绝对定位position:absolute样式 并且使用left top进行定位位置 */ 
.div-b{ position:absolute;width:50px;height:50px; 
right:15px;bottom:13px;background:#00F} 
/* 使用绝对定位position:absolute样式 并且使用right bottom进行定位位置 */ 
</style>

htmlコードスニペット

<div class="div"> 
    <div class="div-a"></div> 
    <div class="div-b"></div> 
</div>

CSSのposition属性を使用する方法はたくさんあります。必要な場合は、他の更新にも注目してください。このサイト。

関連書籍:

純粋な CSS で作成された小さな関数のいくつかの例

HTML で一般的に使用されるリンク マークの注釈

DIV CSS の読み込みに失敗する場合があるのはなぜですか

以上がCSS位置の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。