CSS_html/css_WEB-ITnoseのposition属性（絶対 | 相対 | 静的 | 固定）の詳細説明-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS_html/css_WEB-ITnoseのposition属性（絶対 | 相対 | 静的 | 固定）の詳細説明

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:46 AM

まず、CSS3 API の位置属性の関連する定義を見てみましょう:

static: 特別な位置決めはなく、オブジェクトは通常のドキュメントフローに従います。上、右、下、左などのプロパティは適用されません。

relative: オブジェクトは通常のドキュメントフローに従いますが、上、右、下、左、その他の属性に基づいて通常のドキュメントフロー内でオフセットされます。そして、そのカスケードは z-index 属性によって定義されます。

absolute: オブジェクトは通常のドキュメントフローから分離されており、上、右、下、左およびその他の属性を使用して絶対位置を決定します。そして、そのカスケードは z-index 属性によって定義されます。

修正: オブジェクトは通常のドキュメントフローから分離されており、上、右、下、左などの属性を使用してウィンドウを基準点として配置します。スクロールバーが表示されると、オブジェクトは一緒にスクロールしません。そして、そのカスケードは z-index 属性によって定義されます。

どうですか、まだ混乱していますか~~ 構いません。いくつかの基本的な概念から 1 つずつ説明しましょう:

ドキュメントフローとは何ですか?

フォームを上から下の行に分割し、各行の要素を左から右に配置します。これがドキュメントフローです。

要素がドキュメントフローから離脱する原因となる状況は、フローティング、絶対配置、および相対配置の 3 つだけです。

静的配置 (静的):

静的、特別な配置なし。これは HTML 要素のデフォルトの配置方法です。つまり、要素の位置属性を設定しない場合、デフォルトの位置値は次のようになります。 static は通常のドキュメントフローオブジェクトに従い、オブジェクトはドキュメントスペースを占有します。この配置モードでは、上、右、下、左、Z インデックスなどの属性は無効です。

関係位置付け（相対）：

。しかし、それは何と関係があるのでしょうか？これは重要な点であり、私を最も混乱させる点です。ここで、誰もが理解できると思います:

(1) 初期の配置されていない

<style type="text/css">      #first { width: 200px; height: 100px; border: 1px solid red; }      #second{ width: 200px; height: 100px; border: 1px solid blue;}  </style>  <body>  <div id="first"> first</div>  <div id="second">second</div>  </body>

ログイン後にコピー

初期の元の画像:

(2) 最初の要素の位置属性を変更します:

<style type="text/css">      #first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /*add position*/      #second{width: 200px; height: 100px; border: 1px solid blue;}  </style>

ログイン後にコピー

20px の相対オフセット後:

-- >> 点線は初期位置空間

わかりますか?相対位置は、ドキュメントフロー内の元の位置に対するオフセットであり、相対位置も通常のドキュメントフローから離れるわけではなく、その上/左/右/下属性に従うこともわかっています。静的から絶対への中間遷移属性と言えますが、最も重要なのはドキュメント空間も占有し、上/右/左のオフセットによって占有されるドキュメント空間が変化しないことです。 /bottom およびその他の属性。これは、その背後にある要素が点線の位置に基づいて配置されることを意味します (top / left / right /bottom などの属性が有効になる前)。これを理解する必要があります。

さて、top/right/left/bottom 属性は、相対的に配置された要素が占めるドキュメントスペースをオフセットしないことはわかっています。では、margin/padding はドキュメントスペースをオフセットしますか?答えは「はい、一緒に実験してみましょう:

(3) マージン属性を追加します:

<style type="text/css">      #first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* add margin*/      #second{width: 200px;height:100px;border: 1px solid blue;}  </style>

ログイン後にコピー

マージンを設定した後: 20px:

それはとてもそうですよね？まず最初の要素の外側のマージンを 20 ピクセルに設定し、次に 2 番目の要素を下に 40 ピクセルオフセットする必要があるため、マージンがドキュメントのスペースを占めるようになります。同様に、パディングの効果を自分でテストすることもできます。

絶対位置決め (absolute):

絶対位置決めは、名前は「絶対」ですが、その機能は「相対」という言葉に近いです。絶対を使用して配置された要素がドキュメントフローから外れた後は、祖先クラス要素 (親クラス以上) に基づいてのみ配置でき、この祖先クラスは位置を非静的に配置する必要があることがわかります。、 a 要素は絶対位置指定を使用し、親クラスから開始して、タグが完成するまで、非静的位置に位置する祖先要素を検索します (直接の先祖である必要があることに注意してください)。ここで注意すべき点は、相対メソッドと静的メソッドは、最外層が使用される場合に位置決めの原点としてを使用するのに対し、親がなく位置が使用されない場合、絶対メソッドはを原点として使用するということです。静的な位置決め。要素と要素の差は約 9px です。効果を見てみましょう:

(4) 絶対属性の追加:

<html>  <style type="text/css">      html{border:1px dashed green;}      body{border:1px dashed  purple;}      #first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}      #second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}  </style>  <body>  <div id="first">relative</div>  <div id="second">absoult</div>  </body>  </html>

ログイン後にコピー

レンダリング:

哈哈，看了上面的代码后，细心的朋友肯定要问了，为什么absoulte定位要加 top:0; left:0; 属性，这不是多此一举呢？

其实加上这两个属性是完全必要的，因为我们如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~

少了left/right/top/bottom属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：

如果top和bottom一同存在的话，那么只有top生效。

如果left和right一同存在的话，那么只有left生效。

既然absoulte是根据祖先类中的position非static元素进行定位的，那么祖先类中的margin/padding会不会对position产生影响呢？看个例子先：

(5) 在absoulte定位中添加margin / padding属性：

#first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;}  #second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;}  <div id="first">first  <div id="second">second</div>  </div>

ログイン後にコピー

效果图：

看懂了，祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位。

Note : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

固定定位(fixed)：

fixed定位，又称为固定定位，它和absoult定位一样，都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。

z-index属性：

z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

Note：使用static 定位或无position定位的元素z-index属性是无效的。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。