>

的世界是怎样的

- 编辑:至尊游戏网站 -

的世界是怎样的

追究:相对定位未有安装 top, right, bottom, left 的社会风气是何等的?

2015/08/19 · CSS · 纯属定位

原稿出处: bolo的前端blog   

二个要素假如设置了’position: absolute;’, 但未有设置top, right, bottom, left, 此元素的岗位在哪?

在提到到相对定位成分的岗位难点时, 二个关键的概念是containing block, 想要精通成分的岗位, 还得找到此因素的containing block才行. 如下是自己举办的风度翩翩密密层层测量检验, 以至对测验结果的试探性解释.

文中的意大利语术语都不翻译, 方便直接查W3C恐怕别的技艺文档.
请持有疑心精气神阅读此文, 接待商讨.

CSS position:absolute浅析,absolute浅析

生龙活虎、相对定位的风味

纯属定位有所与变化同样的特征,即包裹性和破坏性。

就破坏性来说,浮动仅仅破坏了成分的冲天,保留了成分的小幅度;而相对定位的成分中度和宽度都未有了。

请看上边代码:

图片 1 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>相对定位的表征</title> 6 <style> 7 .box1,.box2,.box3 { 8 background-color: orange; 9 margin-bottom: 30px; 10 } 11 12 .absolute { 13 position: absolute; 14 } 15 16 .wraper { 17 display:inline-block; 18 margin-left: 300px; 19 } 20 21 .float { 22 float: left; 23 } 24 25 .box3 { 26 position: absolute; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="box1"> 32 <img src="" alt="A picture" style="width:175px;height:100px" /> 33 <img src="" alt="A picture" style="width:240px;height:180px" /> 34 <p>那是惯常流中的两幅图像。</p> 35 </div> 36 <div class="box2"> 37 <img class="absolute" src="" alt="A picture" style="width:175px;height:100px" /> 38 <img src="" alt="A picture" style="width:240px;height:180px" /> 39 40 <div class="wraper"> 41 <img class="float" src="" alt="A picture" style="width:175px;height:100px" /> 42 <img src="" alt="A picture" style="width:240px;height:180px" /> 43 </div> 44 <p>左图,将率先幅图像相对定位,其完全退出文书档案流,何况覆盖在第二幅图像之上;由此看出,相对定位的破坏性不仅仅让要素未有了莫斯中国科学技术大学学,甚至未曾了步长。</p> 45 <p>右图,将第风姿洒脱幅图像左浮动,其就算脱离了文书档案流,可是并不曾蒙蔽在任何因素之上;浮动的破坏性仅仅破坏了成分的惊人,而保留了成分的宽窄。</p> 46 </div> 47 <div class="box3"> 48 <img src="" alt="A picture" style="width:175px;height:100px" /> 49 <img src="" alt="A picture" style="width:240px;height:180px" /> 50 <p>将容器相对定位,显示其包裹性。</p> 51 </div> 52 </body> 53 </html> View Code

 

二、相对定位的平日准绳:

要素相对定位时,会完全退出文书档案流,并相对于其蕴涵块定位。

纯属定位的蕴藏块,是其这二日的已定位的先世元素。

只要这几个祖先成分是块级成分,包罗块则为该祖先成分的内边距边界,即边框。

即使这些祖先元素是行内成分,饱含块则为该祖先成分的开始和结果边界,即内容区。

假设未有已牢固的古代人成分,成分的含有块定义为起始包罗块。

偏移属性:top、right、bottom、left。

若果绝对定位的因素未有设置偏移属性,固然脱离文书档案流,可是它的岗位是原地不动的。

偏移属性可感到负值,将成分定位到含有块之外。

代码在那:

图片 2 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>相对定位的貌似准则</title> 6 <style> 7 body { 8 background-color: #ccc; 9 } 10 .container { 11 width:500px; 12 background-color: orange; 13 margin:20px auto 50px auto; 14 padding:20px; 15 border:2px solid red; 16 } 17 18 .box2 img,.box3 img, 19 .box4 img,.box5 img { 20 position: absolute; 21 } 22 23 .box3 img,.box4 img { 24 left:0; 25 bottom:0; 26 } 27 28 .box5 img { 29 left: -30px; 30 bottom: -50px; 31 } 32 33 .block { 34 position :relative; 35 height: 200px; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="container"> 41 <div class="box1"> 42 <p>成分相对定位时,会完全脱离文档流,并相对于其饱含块定位。相对定位的包涵块,是其多年来的已稳固的古代人成分。</p> 43 <img src="" alt="A picture" style="width:175px;height:100px" /> 44 <ul> 45 <li>就算那几个祖先成分是块级成分,富含块则为该祖先元素的内边距边界,即边框。</li> 46 <li>假设那么些祖先成分是行内成分,蕴含块则为该祖先成分的剧情边界,即内容区。</li> 47 <li>若无已牢固的先世成分,成分的盈盈块定义为始发包含块(二个视窗大小的矩形卡塔 尔(英语:State of Qatar)。</li> 48 </ul> 49 </div><!--关闭box1--> 50 </div><!--关闭container--> 51 <div class="container"> 52 <div class="box2"> 53 <p>不管有未有曾经固化的祖辈成分,只要未有偏移量,相对定位之后,原地不动,脱离文书档案流。</p> 54 <p>下边那一个曾经相对定位的图像原地没动,可是已经淡出了文档流。</p> 55 <img src="" alt="A picture" style="width:175px;height:100px" /> 56 </div><!--关闭box2--> 57 </div><!--关闭container--> 58 <div class="container"> 59 <div class="box3"> 60 <p>没有已经稳固的祖先成分,有偏移量,相对定位之后,以早先包罗块(贰个视窗大小的矩形卡塔尔为标准实行偏移。</p> 61 <p>当偏移量为left:0; buttom:0时,图像水平偏移到了初叶富含块左下角(张开网页最开首的那多少个视窗的左下角卡塔 尔(阿拉伯语:قطر‎。</p> 62 <img src="" alt="A picture" style="width:175px;height:100px" /> 63 </div><!--关闭box3--> 64 </div><!--关闭container--> 65 <div class="container block"> 66 <div class="box4"> 67 <p>有已经固化的祖先元素,有偏移量,相对定位之后,以已经固定的古时候的人成分为基准实行偏移。</p> 68 <p>此处已经固化的祖辈成分为那些图像的容器div成分,偏移量为left:0; bottom:0时,图像到了这么些容器的左下角(以边框为界卡塔尔国。</p> 69 <img src="" alt="A picture" style="width:175px;height:100px" /> 70 </div><!--关闭box4--> 71 </div><!--关闭container--> 72 <div class="container block"> 73 <div class="box5"> 74 <p>有风华正茂度定位的祖宗成分,有偏移量,相对定位之后,以业已牢固的祖先成分为基准实行偏移。</p> 75 <p>此处已经定位的先世成分为这一个图像的器皿div成分,偏移量为left:-30px; bottom:-50px时,图像到了那一个容器之外(以边框为界卡塔 尔(英语:State of Qatar)。</p> 76 <img src="" alt="A picture" style="width:175px;height:100px" /> 77 </div><!--关闭box5--> 78 </div><!--关闭container--> 79 </body> 80 </html> View Code

 

 三、用margin调治相对定位成分的任务

绝对定位的因素,除了能够接收top、right、bottom、left举行偏移之外,还是能够透过margin值进行准分明位,并且自适应性更加好。

示例:

图片 3 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>用margin调治相对定位元素的岗位</title> 6 <style> 7 .box1,.box2,.box3 { 8 display: inline-block; 9 margin-right: 150px; 10 border:1px solid blue; 11 } 12 13 span { 14 background-color: red; 15 } 16 17 .box2 span,.box3 span { 18 position: absolute; 19 } 20 21 .meng { 22 margin-left: -3em; 23 } 24 25 .box4 { 26 border:1px solid red; 27 width: 500px; 28 margin: 50px auto 0 auto; 29 padding:20px; 30 } 31 32 li { 33 margin-bottom: 20px; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="box1"> 39 <span>卡哇伊</span> 40 <img src="" style="width:200px;height:300px" /> 41 <span>萌萌哒</span> 42 </div> 43 <div class="box2"> 44 <span>卡哇伊</span> 45 <img src="" style="width:200px;height:300px" /> 46 <span>萌萌哒</span> 47 </div> 48 <div class="box3"> 49 <span>卡哇伊</span> 50 <img src="" style="width:200px;height:300px" /> 51 <span class="meng">萌萌哒</span> 52 </div> 53 <div class="box4"> 54 <ol> 55 <li>第后生可畏幅图,最伊始的楷模。</li> 56 <li>第二幅图,三个标签相对定位,不过不钦赐别的偏移量。</li> 57 <li>第三幅图,用margin负值调节“萌萌哒”的职务,完毕。</li> 58 </ol> 59 </div> 60 </body> 61 </html> View Code

遗弃偏移属性而改用margin来调治相对定位元素,其规律在于:

纯属定位的因素,在不安装偏移量的时候,它纵然完全退出了文书档案流,但它还在原位。

应用偏移属性举办正确定位,其具体地方是在于相对定位成分的蕴藏块,分裂的蕴藏块将会有一同不后生可畏致的定势结果。

而采用margin进行正确定位,不依附于于别的此外东西,越发可控。

在写那篇博文的时候,absolute让自家给relative带话,它说:“relative,你给本身滚好吧,笔者这一辈子都不想看看您!”

预感后事怎么样,请移步relative篇,感激!

 

四、相对定位与完整布局

哪些用相对定位来对页面进行一体化布局?

简易严酷,不学就浪费啊!!!

图片 4 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>相对定位与完整页面布局</title> 6 <style> 7 * { 8 margin: 0; 9 }/*重新初始化全部margin为0,这一步极度首要,不然布局必乱。*/ 10 11 html,body,.page { 12 width: 100%; 13 height: 100%; 14 overflow: hidden; 15 } 16 17 .page { 18 position: absolute; 19 top: 0; 20 right: 0; 21 bottom: 0; 22 left: 0; 23 background-color: #ccc; 24 } 25 26 .header { 27 position: absolute; 28 height: 50px; 29 left: 0; 30 right: 0; 31 background-color: purple; 32 padding: 0 5px; 33 z-index: 1; 34 } 35 36 .header>h1 { 37 line-height: 50px; 38 text-align: center; 39 } 40 41 .aside { 42 position: absolute; 43 top: 50px; 44 bottom: 50px; 45 left: 0; 46 width: 100px; 47 background-color: orange; 48 } 49 50 .footer { 51 position: absolute; 52 right: 0; 53 bottom: 0; 54 left: 0; 55 height: 50px; 56 background-color: purple; 57 } 58 59 .footer>h1 { 60 text-align: center; 61 line-height: 50px; 62 } 63 64 .content { 65 position: absolute; 66 top: 50px; 67 right: 0; 68 bottom: 50px; 69 left: 100px; 70 background-color: cyan; 71 overflow: auto; 72 } 73 74 .content h1 { 75 margin-top: 100px; 76 margin-left: 50px; 77 } 78 79 .content li { 80 margin-left: 100px; 81 margin-top: 80px; 82 font-size: 24px; 83 line-height: 1.5; 84 } 85 86 ol { 87 margin-bottom: 80px; 88 } 89 </style> 90 </head> 91 <body> 92 <div class="page"> 93 <div class="header"> 94 <h1>Header</h1> 95 </div> 96 <div class="aside"> 97 <h1>Aside</h1> 98 </div> 99 <div class="content"> 100 <h1>实现原理</h1> 101 <ol> 102 <li>创设四个div.page,相对定位,铺满全屏。</li> 103 <li>创制三个div.header,相对定位,设定高度。</li> 104 <li>成立一个div.aside,相对定位,设定宽度。</li> 105 <li>创建多少个div.footer,相对定位,设定中度。</li> 106 <li>创建叁个div.content,相对定位,依据相近div的宽高设定它的宽高;<br /> 107 以div.content成分替代原body成分,全数的页面内容都坐落那此中。</li> 108 </ol> 109 </div> 110 <div class="footer"> 111 <h1>Footer</h1> 112 </div> 113 </div> 114 </body> 115 </html> View Code

 

position:absolute浅析,absolute浅析 后生可畏、相对定位的性状 相对定位有所与变化相似的特征,即包裹性和破坏性。 就破坏性来讲,浮动仅仅破...

在inline box里的情况

点击预览
地点的事例未有对此外因素设置’position: absolute;’

点击预览
日增如下代码

CSS

span.left { margin-right: 10px; padding-right: 10px; } span.inner { position: absolute; }

1
2
3
4
5
6
7
span.left {
  margin-right: 10px;
  padding-right: 10px;
}
span.inner {
  position: absolute;
}

span.inner 只设置’position: absolute;’, 未有设置top, right, bottom或left. 那时top, right, bottom或left的initial value是auto.

当今, 尝试用chrome开垦者工具对span.inner元素的’position: absolute;’进行勾选可能撤销勾选, 看看产生了怎么着? (提示: 在这里个事例里, span.inner与span.left成分之间是未曾空白符(white space)的, span.inner内部有三个空格, 两个 .)

裁撤勾选’position: absolute;’后, 多出二个空白符. 再度勾选后, 多出的丰硕空白符消失. 那么些未有的空白符是什么人? 为何会磨灭?

于今大家先把span.inner的’position: absolute;’撤废勾选. 若是我们再品尝对span.inner分别安装’float: left;’, ‘display: inline-block;’, ‘display: table-cell;’, ‘display: table;’, ‘display: inline-table;’, ‘display: inline-flex;’, 你会意识span.inner内的首先个空白符(是二个空格)都会发出同样的现象: 消失.

未有原因得从地点的一批属性种找协同点: BFC(block formatting context). 下边包车型客车每叁个属性(包蕴’position: absolute;’)都能够接触二个新的BFC, 所以span.inner里的故事情节步向了BFC后化作了新的生机勃勃行, 而依据W3C的规范:

a sequence of collapsible spaces at the beginning of the line is removed

即行首片段的一个或三个可折叠(collapsible)的空白符是被移除的. 作者想那就是冰释的原因. 所以, 这一个情景并不是’position: absolute;’未有设置top, right, bottom, left情状下的专门项目, 应该能够消除了.

注:

  • ‘overflow: hidden;’ 不能动用于inline box, 不满足触发BFC的尺度. 详细的情况见
    flow-root
    BFC
  • ‘display: table;’通过发出anonymous ‘table-cell’ box接触三个新的BFC.

从上边的事例里, 就好像span.inner的containing block的右手缘便是span.inner后面紧挨着的非常成分的margin侧边缘. 情状是那样呢? 继续看下多少个例子.

点击预览
此例中CSS未变, HTML的span.inner与span.left之间多了贰个空白符, span.inner内部的率先个空白符(是个空格)去掉了, 留下了八个 .

XHTML

<section class="demo"> <span class="left">Beginning of body contents.</span> <span class="inner" style="position: absolute;">  Inner contents.</span> </section>

1
2
3
4
<section class="demo">
    <span class="left">Beginning of body contents.</span>
    <span class="inner" style="position: absolute;">&nbsp;&nbsp;Inner contents.</span>
</section>

明天, 尝试用chrome开荒者工具对span.inner成分的’position: absolute;’进行勾选或许吊销勾选, 看看发生了什么?

那一回, 固然撤废’position: absolute;’后再品尝对span.inner分别设置’float: left;’, ‘display: inline-block;’, ‘display: table-cell;’, ‘display: table;’, ‘display: inline-table;’, ‘display: inline-flex;’, 结果是: 没变化.

此例与上例的并世无双更改就在于空白符的职位, 那评释了 span.inner的containing block的右边缘应该是span.inner前面紧挨着的老大成分(不考虑空白符)的margin侧边缘. 何况left的initial value, 即’auto’, 会把span.inner定位到它的containing block的侧面缘 (本文只思忖文本的’direction‘为’left-to-right’的情况).

点击预览
html有改观, 加了七个图片, span与span成分之间一贯不空白符, 恢复生机span.inner的不胜去掉的空白符(是个空格).

XHTML

<section class="demo"> <p> <span class="left">Beginning of body contents.</span><span class="inner" style="position: absolute;">   Inner contents.</span><img class="img1" src="" width="55"><img class="img2" src="" width="300px"> </p> </section>

1
2
3
4
5
<section class="demo">
  <p>
    <span class="left">Beginning of body contents.</span><span class="inner" style="position: absolute;"> &nbsp;&nbsp;Inner contents.</span><img class="img1" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" width="55"><img class="img2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/2000px-Stack_Overflow_logo.svg.png" width="300px">
  </p>
</section>

现行反革命测量试验的是span.inner(别忘了它只设置了’position: absolute;’且不设置top, right, bottom, left)的containing block的下边缘.

品尝用chrome开辟者工具对span.inner元素的’position: absolute;’进行勾选大概撤回勾选, 看看发生了什么?

span.inner在被给与’position: absolute;’的时候, 其在笔直方向上的表现与对其设置’vertical-align: top;’没有差异. 从上述测量检验结果看, span.inner的containing block的上边缘应该与其所处的line box的content box的顶部缘在地方上是黄金时代致的.

八个验证例子:
点击预览
点击预览

对于上述的第二个例证, 尝试用chrome开垦者工具对img.img1成分的’position: absolute;’进行勾选大概吊销勾选, 看看发生了什么样? (留意: img.img1和img.img2都安装了’position: absolute;’且并未有设置top, right, bottom, left).

结果评释, 对二个要素(img.img1)进行相对定位会影响到另一个纯属定位的成分(img.img2)的职责, 当然, 那个’相对定位’是未有安装四个方向属性的值的情状.

点击预览
此例CSS变动如下:

CSS

.inbox { color: blue; position: absolute; top: -10px; } .floatele { float: right; width: 300px; height:50px; background: tomato; padding: 10px; } .demorel { position: relative; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.inbox {
    color: blue;
    position: absolute;
    top: -10px;
}
.floatele {
    float: right;
    width: 300px;
    height:50px;
    background: tomato;
    padding: 10px;
}
.demorel {
    position: relative;
}

HTML如下:

XHTML

<section class="demo demorel"> <p>Beginning of body contents. <div class="floatele"> <span class="inner">   Inner contents.</span><span style="top: -10px;" class="inbox">   Inner contents.</span> </div> </p> </section>

1
2
3
4
5
6
7
<section class="demo demorel">
      <p>Beginning of body contents.
        <div class="floatele">
          <span class="inner"> &nbsp;&nbsp;Inner contents.</span><span style="top: -10px;" class="inbox"> &nbsp;&nbsp;Inner contents.</span>
        </div>
    </p>
</section>

 

此例的第三个’Inner contents.’, 即span.inbox设置了top: -10px; 其余三个样子依旧不设置, 即为auto. section.demorel设置了’position: relative;’. div.floatele设置了’float: right;’, 当时span.inbox的containing block的左边缘依然满意前面包车型客车结论.

在block box里的景观

 点击预览

XHTML

<section class="demo demorel"> <div class="floatele"> <div class="inbox2"></div> </div> </section>

1
2
3
4
5
<section class="demo demorel">
  <div class="floatele">
    <div class="inbox2"></div>
  </div>
</section>

CSS主要有:

CSS

.inbox2 { background: #6c4ecd; width: 50px; height: 50px; position: absolute; } .floatele { float: right; width: 300px; height:50px; background: tomato; padding: 10px; } .demorel { position: relative; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.inbox2 {
    background: #6c4ecd;
    width: 50px;
    height: 50px;
    position: absolute;
}
.floatele {
    float: right;
    width: 300px;
    height:50px;
    background: tomato;
    padding: 10px;
}
.demorel {
    position: relative;
}

div.inbox2的containing block的左边缘和上面缘都以其深情厚意父元素content box的侧边缘和上边缘 (content box的边缘又称content edge).

但值得注意的是, 此例与常规相对定位情形下的区分:
点击预览

CSS有改变, 包含在HTML内:

XHTML

<section class="demo demorel"> <div style="position: relative;" class="floatele"> <div style="left: 0; top: 0;" class="inbox2"></div> </div> </section>

1
2
3
4
5
<section class="demo demorel">
  <div style="position: relative;" class="floatele">
    <div style="left: 0; top: 0;" class="inbox2"></div>
  </div>
</section>

这是三个健康的相对定位例子, 因为安装了top和left的值. 值得注意的一些是, 这时div.inbox2的containing block的左侧缘和上面缘是其骨血父成分的padding edge.

小结

当相对定位且不设置方向值的要素在inline box里时:

  1. 未安装的方向(top, right, bottom, left)的值是auto.
  2. 此元素containing block的右手缘应该是该成分前三个成分(空白符除此之外)的margin左边缘.
  3. 此成分containing block的上方缘应该是该因素所在的line box的content box的顶上部分缘
  4. 假诺left的值为auto, 则该成分会定位到其containing block的左边手缘. 假如top的值为auto, 则该成分会定位到其containing block的上边缘.

当相对定位且不设置方向值的因素在block box里时:

  1. 未安装的大方向(top, right, bottom, left)的值是auto.
  2. 此成分的containing block的左边缘和上面缘应该是其父成分创立的content box的左侧缘和上边缘.
  3. 假若left的值为auto, 则该成分会定位到其containing block的侧面缘. 假若top的值为auto, 则该元素会定位到其containing block的顶上部分缘.

本文只探讨了元素分别在line box和block box里的containing block的左边缘和上面缘(文本的’direction‘为默许的’ltr’, 即从左到右), 还大概有更加多有待商量.

本文所切磋的主题素材本人从未找到直接有关的W3C规范, 假若有请必定要@bolo :)

1 赞 2 收藏 评论

图片 5

本文由技术教程发布,转载请注明来源:的世界是怎样的