ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnoseのposition属性（絶対 | 相対 | 静的 | 固定）の詳細説明
CSS_html/css_WEB-ITnoseのposition属性（絶対 | 相対 | 静的 | 固定）の詳細説明
- WBOYオリジナル
- 2016-06-24 11:46:541123ブラウズ
まず、CSS3 API の位置属性の関連する定義を見てみましょう:
どうですか、まだ混乱していますか~~ 構いません。いくつかの基本的な概念から 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 要素は絶対位置指定を使用し、親クラスから開始して、100db36a723c770d327fc0aef2ce13b1 タグが完成するまで、非静的位置に位置する祖先要素を検索します (直接の先祖である必要があることに注意してください)。ここで注意すべき点は、相対メソッドと静的メソッドは、最外層が使用される場合に位置決めの原点として 6c04bd5ca3fcae76e30b72ad730ca86d を使用するのに対し、親がなく位置が使用されない場合、絶対メソッドは 100db36a723c770d327fc0aef2ce13b1 を原点として使用するということです。静的な位置決め。 100db36a723c770d327fc0aef2ce13b1 要素と 6c04bd5ca3fcae76e30b72ad730ca86d 要素の差は約 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的属性值，那元素又该往哪偏移好呢？记住下面的规则：
既然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属性是无效的。