ブロックを含む位置(&B)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

1. 包含ブロック

位置について話すには、まず包含ブロックという概念が関係します。

1. 包含ブロックの概要

包含ブロックを簡単に理解すると、位置決め参照ブロック、つまり、大きなボックス内の小さなボックス内の大きなボックスです。要素に position 属性がある場合、その要素には包含ブロックが含まれている必要があります。まずは簡単にまとめてみましょう。

1. 初期包含ブロック (初期包含ブロック)、ルート要素の包含ボックスです。ブラウザでは、原点がキャンバスの原点と一致し、サイズがビューポートと同じである長方形です。

2. Position:static|relative 要素には、最も近いブロックレベルの [block|list-item|table] 親要素のコンテンツボックスとしてブロックが含まれます

3. position: 最初に、最近配置された絶対的な祖先要素を見つけます [ifではなく、インクルードブロックそれは最初の包含ブロックです】

祖先要素がブロックレベルの要素の場合、包含ブロックは祖先要素のパディングボックスです。

祖先要素がインライン要素の場合、包含ブロックは祖先要素の方向属性に依存します

direction:ltr、祖先要素の最初のボックスの上と左のパディングボックス境界は、包含ブロック、祖先要素の最後のボックスの下部と右のパディング境界は、包含ブロックの下部と右です。

方向: rtl、祖先要素の最初のボックスの上と右のパディングボックス境界は、包含ブロックの上と右であり、祖先要素の最後の要素の下と左のパディングボックス境界は下です。そしてそれを含むブロックの左側。

4. positon:fixed 要素を含むブロックはビューポートによって決定され、ルート要素とは関係ありません。

2. 静的ブロックと包含ブロック

例: 位置が設定されていないため、ラベルの位置はデフォルトで静的です。

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <title>包含块 by starof</title></head><body>    <div id="div1">        <p id="p1">第一段内容</p>        <p id="p2">            这些文字是            <em id="em1">第 <strong id="strong1">二</strong>段</em>             内容        </p>    </div></body></html>

ログイン後にコピー

ボックスを生成する要素??》包含ブロック

body??》初期 C.B.(UA 依存)

div1??》body

p1??》div1

p2??》div1

em1??》p2

strong1??》p2

3、絶対ブロックと包含ブロック

例: 方向:ltr、保護ブロックの上部、左側は、によって生成された最初のボックスのパディングボックスです。祖先要素、右下の理由と同じ。

<p style="border:1px solid red; width:200px; padding:20px;">    TTT    <span style="background-color:#C0C0C0; position:relative;padding:10px;">        这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>    </span></p>

ログイン後にコピー

包含ブロックの幅は負の値になる可能性があります。インライン要素の最初のボックスの開始位置は、最後のボックスの終了位置の右側にあります。この場合、包含ブロックには負の値。

例: 方向:rtl、保護ブロックの上部、右は祖先要素の最初のボックスの上部、右のパディングボックス、左下も同様です。

<p style="border:1px solid red; width:200px; padding:20px; direction:rtl;">    T    <span style="background-color:#C0C0C0; position:relative;padding:10px;">        这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。可以通过它们绝对定位的位置来判断它们 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>    </span></p>

ログイン後にコピー

その他の状況は比較的単純なので紹介しません。次に、position の各値の詳細について説明します。

2.position:static

static はデフォルト値であり、要素が「配置されていない」ことを意味します。position の他の値は、要素が「配置されている」ことを意味します。したがって、「位置要素」とは、position 属性が static 以外の値に設定されている要素を意味します。 Position:static 要素の配置はボックスモデルに従って通常の流れで配置されます。

使用法:

通常、以前に設定した配置を上書きして要素を通常のフローに戻したい場合を除き、仕様を表示する必要はありません。

3.position:relative

relative は、top|right|bottom|left 属性が追加されない限り、static と同じように動作します。 //lxy は、静的から絶対への遷移属性状態である相対的なものとして理解できます。インラインとブロックの間にインラインブロックがあるようなものです。

相対配置要素の属性設定 top|right|bottom|left が通常の位置から逸脱すると、他の要素は逸脱後の残りのスペースを補うために位置を調整しません。また、元のスペースを占有しているため、他の要素のレイアウトに影響を与えず、他の要素を覆う可能性があることも理解できます。

概要: 相対要素はまだ通常のフロー内にあり、表示属性を変更しません。これにより、ページ上の他の要素がカバーされる可能性があります。

例:

<style>div{    display: inline-block;}.red{    width: 100px;    height: 100px;    border:1px solid red;    position: relative;    background-color: yellow;}.green{    width: 100px;    height: 100px;    border:1px solid green;}/*.left{    left: -50px;}*/</style><body>    <div class="red left">第一个元素</div>    <div class="green">第二个元素</div>    <div class="red left">第三个元素</div></body>

ログイン後にコピー

オフセットを設定した後のコントラスト効果を確認するには、コメントを解除します:

4. Position:absolute

position:absolute は、最も近い「位置決めされた」祖先要素を基準にして配置されます。「位置決めされた」祖先要素がない場合、それはドキュメントの body 要素に対して相対的なものとなり、ページのスクロールに応じて移動します。

絶対配置要素の配置値が競合する場合の解決策:

topとbottom(非自動)が同時に指定された場合、topが最初に使用されます。

左と右が同時に指定された場合、方向が ltr (英語、中国語など) の場合は左が優先され、方向が rtl (アラビア語、ヘブライ語など) の場合は右が優先されます。

いくつかのポイントを要約すると:

位置: 絶対値、マージン、およびパディングは競合せず、同時に有効になります。

position:absolute は表示値を変更するため、折り返しが発生します。

position:absolute 要素は通常のフローから外れています。だから破壊的になるのです。

position:absolute が存在する場合 [上、右、下、左なし] では、float は効果がないため、float に使用できます。

1. ラッピング

position:absolute が設定された要素は、コンテンツに合わせてサイズが縮小されます。

position:absoluteは要素の表示属性を[floatingと同様に]変更するため、以下の例のようにinlineはブロックになります。

<style>.container{    border: 1px solid green;    padding: 30px;    background-color: green;    background-clip: content-box;/*将背景裁剪到内容框，方便看绝对定位元素效果*/    position: absolute;}</style><div class="container">内容</div>

ログイン後にコピー

块状元素设置position:absolute后，chrome下top,right,bottom,left变为auto，而ff下直接是计算出的宽度。

2、破坏性

举例：子元素absolute，父元素高度塌陷。

<style>.father{border:1px solid red;}.son{background-color: green;position: absolute;/*float: left;*/}</style></head><body>    <div class="father">        <div class="son" >元素内容</div>    </div></body>

ログイン後にコピー

原理：和float一样，position:absolute让元素脱离正常流，而父元素还在正常流中，它们已经是两个世界的东东了，自然撑不起父元素高度。

Note:设置position:absolute后再设置float:left不生效，且最终计算的float值还是none而不是设置的值。

3、不受relative控制的position:absolute举例

不使用top，right,bottom,left中任何一个属性或者使用auto作为值。

一般都是用absolute加margin调整位置。

举例：hot图片始终在求课文字右上角。

<style type="text/css">.icon-hot {  position: absolute;  width: 28px;  height: 11px;  margin: -6px 0 0 2px;  background-color: red;  background: url(img/new.jpg);}</style><body>  <h3>    <a href="#">      新项目 <i class="icon-hot"></i>    </a>  </h3>  <a href="#">新项目</a><img src="img/new.jpg" style="margin-bottom:15px;"></body>

ログイン後にコピー

分析：因为position:absolute让标签的display值从inline变成block，所以可以设置宽高。通过margin调整位置。

类似例子：

<!doctype html><html><head><meta charset="utf-8"><title>图标定位二三事</title><style>body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }body, h3, h5 { margin: 0; }img { border: 0 none; vertical-align: bottom; }.l { float: left; }.r { float: right; }.constr { width: 1200px; margin-left: auto; margin-right: auto; }.course { padding-top: 10px; }.course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }.course-list-img { background-color: #6396F1; }.course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }.course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }.icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }.icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }</style></head><body><div class="main"> <div class="constr"> <div class="course"> <a href="http://www.imooc.com/view/121" class="course-list"> <div class="course-list-img"> <span class="icon-recom">推荐</span> <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><i class="icon-vip">vip</i> </div> <h5 class="course-list-h">分享：CSS深入理解之float浮动</h5> <div class="course-list-tips"> <span class="l">已完结</span> <span class="r">3514人学习</span> </div> </a> </div> </div></div></body></html>
ログイン後にコピー

4、无固定宽高容器内绝对定位元素拉伸

举例：实现遮罩效果

<style>body { background-color: #ddd;}img { vertical-align: bottom;}.container { display: inline-block; position: relative;}.cover { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: blue; opacity: .5; filter: alpha(opacity=50);}</style><body><span class="container"> <i class="cover"></i> <img src="img/wb.jpg"></span></body>
ログイン後にコピー

同样的原理实现：全屏自适应遮罩层效果，切加上margin:auto可实现水平且直居中。

<!doctype html><html><head> <meta charset="utf-8"> <title>没有宽度和高度声明实现的全屏自适应效果by starof</title><style>html, body { height: 100%;}.overlay { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5);}.content { position: absolute; width: 300px; height: 200px; margin: auto; left: 0; top: 0; right: 0; bottom: 0; background-color: #fff;}</style></head><body> <div class="overlay" id="overlay"> <div class="content"> 弹出层内容 <a href="javascript:void(0);" id="close">关闭</a> </div> </div> <a href="javascript:void(0);" id="open">打开</a><script>var openA=document.getElementById("open");var overlay=document.getElementById("overlay");var closeA=document.getElementById("close");openA.onclick=function(){overlay.style.display="block";}closeA.onclick=function(){overlay.style.display="none";}</script></body></html>
ログイン後にコピー

五、position:fixed
fixed是absolute的特例，相对于视窗来定位，所以页面滚动它还是停靠在相对位置。

所以fixed也会改变元素的display属性，会让元素脱离正常流。
六、position和float的关系
1、position:static;position:relative和float属性可共存。

3、同时设置position:absolute和float，float无效。

4、设置position:absolute的元素可能会覆盖float元素。

举例：

<style>.float{ width: 300px; height: 150px; background: green;}.abs{ width: 150px; background-color: red; position: absolute; top:50px;}</style></head><body> <div class="float">我是float：left的DIV</div> <div class="abs">我是一个应用了position：absolute的DIV。</div></body>
ログイン後にコピー

为什么绝对定位元素可能会覆盖浮动元素，因为浏览器渲染的时候相同堆叠上下文中，先渲染非定位元素，再渲染浮动元素，最后渲染已定位元素。

关键问题是，此时设置float元素的z-index来覆盖absolute无效。因为z-index值只适用于已经定位的元素（即position:relative/absolute/fixed），对浮动元素不起作用的。

可将float元素的position属性值设置为relative，然后设置z-index。因为已定位元素并且z-index不是默认的auto的话会生成一个新的堆叠上下文。

如果上面说的还不是很懂，或者想更深入了解z-index原理，可参考：z-index堆叠规则
七、资源链接
8 Box model

9 Visual formatting model

中文版CSS2/visuren

中文版CSS2/visudet/zh-hans

KB012: 绝对定位( Absolute positioning )

http://w3help.org/zh-cn/causes/RM1020

http://w3help.org/zh-cn/kb/008/

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。