的社会风气是怎么的,CSS浓厚掌握之absolute定位
分类:前端技术

斟酌:相对定位未有安装 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>若无已定位的祖先成分,成分的含有块定义为开端包括块(八个视窗大小的矩形卡塔 尔(阿拉伯语:قطر‎。</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浅析 生龙活虎、相对定位的风味 绝对定位有所与变化同样的表征,即包裹性和破坏性。 就破坏性来讲,浮动仅仅破...

CSS深入通晓之absolute定位

2018/05/25 · CSS · absolute

原稿出处: micstone   

position&containing block,positionfixed

在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的上面缘在地方上是相像的.

五个注脚例子:
点击预览
点击预览

对此上述的第1个例证, 尝试用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的侧边缘依旧满意前边的结论.

1. 写在前面

本篇就要介绍的相对定位absolute属性和早先牵线的CSS种类——CSS浓重掌握之float浮动负有几分的相似性,可以以为双方是男生关系,都怀有“包裹性”、“高度塌陷”、“块状化”的特色,它们在广大场馆都得以相互替代。很三人想必有这么的疑点:三个属性名是“position”,一个属性名是“float”,从名字看起来,它们八竿子都打不着啊,怎么依旧手足关系呢?要说position: absoluteposition: relative是兄弟关系还是可以够通晓,要说和float是弟兄关系作者就纳闷!!!呵呵~~~~,别急,那正是作文本文的指标。

一、包含块(Containing Block)

要讲position,首先就事关到一个概念:包罗块。

在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.

2. absolute的特性

在介绍absolute之前,有以下公共CSS代码:

/* CSS代码 */ .father{ border: 2px solid deeppink; width: 200px; } .son { position: absolute; font-size: 0; border: 2px solid blue; padding: 5px; } .father img { width: 128px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* CSS代码 */
.father{
    border: 2px solid deeppink;
    width: 200px;
}
.son {
    position: absolute;
    font-size: 0;
    border: 2px solid blue;
    padding: 5px;
}
.father img {
    width: 128px;
}

1、富含块介绍

包罗块老妪能解就是叁个牢固参照他事他说加以考察块,正是大盒子里套小盒子中充足大盒子。成分有positon属性就一定涉及到含有块。先轻松计算一下。

1、发轫饱含块(Initial containing block卡塔 尔(英语:State of Qatar),即根成分的盈盈框。 在浏览器中是原点与 canvas 原点重合、大小与 viewport 相似的矩形。

2、position:static|relative成分富含块为多年来的块级【block|list-item|table】父成分的内容框

3、positon:先找absolute如今已定位祖先成分【未有的话富含块正是发端包含块】

  • 假定祖先成分是块级元素,则带有块是祖小春王素的padding框。
  • 例如祖先成分是内联成分,包括块决议于祖先成分的direction属性
    • dirrection:ltr,祖先成分的第贰个盒子的上、左padding框边界是带有块的上和左,祖先成分最后二个盒子的下、右padding边界是包含块的下和右。
    • direction:rtl,祖先成分第2个盒子的上、右padding框边界是富含块的上右,祖先成分最终一个成分的下、左padding框边界是带有块的下、左。

4、positon:fixed成分的盈盈块是由viewport决定的,和根成分非亲非故。

小结

当相对定位且不设置方向值的要素在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

2.1 包裹性

接下来有以下html代码:

<div class="father"> <!--son1与son的唯大器晚成差距是son1的position设置为static--> <div class="son1"> <img src="../../lib/img/mm1.png"/></div> </div> <br/><br/><div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"/></div> </div>

1
2
3
4
5
6
7
8
9
<div class="father">
    <!--son1与son的唯一区别是son1的position设置为static-->
    <div class="son1">
        <img src="../../lib/img/mm1.png"/></div>
</div>
<br/><br/><div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png"/></div>
</div>

最后突显的功效如下图所示:

图片 6

在本例中,son1与son的唯蓬蓬勃勃不相同是son1的position设置为static。 .father元素的宽度设置为200pximg要素是三个128px大幅的图形,则当时断然定位成分宽度表现为”包裹性”,其上涨的幅度也正是里面图片的宽度128px。

出于绝对定位成分宽度表现为”包裹性”,由此,下边包车型大巴CSS写法正是剩下的:

.wrap{ display: inline-block;// 未有要求 position: absolute; }

1
2
3
4
.wrap{
    display: inline-block;// 没有必要
    position: absolute;
}

2、static和含有块

举个例子:未有安装postion,所以标签position都以暗中认可的static。

<!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——》initial C.B.(UA-dependent)

div1——》body

p1——》div1

p2——》div1

em1——》p2

strong1——》p2

2.2 中度塌陷

遵照上海教室,父成分div的万丈并从未被子成分撑开(蟹青区域),这种效果能够叫做”中度塌陷“。以致中度塌陷的缘故是因为变化成分脱离了健康的文书档案流,则div.father认为其未有子成分,所以产生了冲天塌陷。

如果在.father要素增添子成分,如下:

<!--HTML代码--> <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> </div> 美女1,美女2,美女3,美女4,美女5 </div>

1
2
3
4
5
6
7
<!--HTML代码-->
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
    美女1,美女2,美女3,美女4,美女5
</div>

则在浏览器中的效果如下:

图片 7

从图中一览无遗看到文字被图片掩盖了,那或多或少和float区别。因为,float成分本身仍居于文书档案流中,文字会环绕着float成分,不会被挡住,而设置了absolute的图片成分现身了层级关系,已经退出了例行的文书档案流了,从父成分的视点看,图片已经完全死灭不见了,由此从最左边最早显得文字,而absolute的层级高,所以图片隐蔽了文字。

3、absolute和包蕴块

比喻:direction:ltr,爱抚块的顶,左是祖小一月素生成的率先个框的padding 框,右下同理。

<p style="border:1px solid red; width:200px; padding:20px;">
    TTT

        这段文字从左向右排列,红 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>

</p>

图片 8

满含块的增长幅度可认为负,行内成分的首先个框的苗子地点坐落于最终四个框结束地点的右边手,那个时候包蕴块为负值。

比喻:direction:rtl,珍爱块的顶,右是祖上元节素第一个框的顶,右padding框,下左同理。

图片 9<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> View Code

图片 10

任何意况相对轻巧,不做牵线。接下来是position各取值细节。

2.3 块状化

块状化的野趣是,意气风发旦成分position的品质为absolute或者fixed,则其display总括值正是block或然table。能够复制以下代码到浏览器调整新竹:

var span = document.createElement('span') document.body.appendChild(span) console.log('1.' window.getComputedStyle(span).display) // 设置成分绝对定位 span.style.position = 'absolute' console.log('2.' window.getComputedStyle(span).display) document.getElementById("aa").style.display = "block"

1
2
3
4
5
6
7
var span = document.createElement('span')
document.body.appendChild(span)
console.log('1.' window.getComputedStyle(span).display)
// 设置元素绝对定位
span.style.position = 'absolute'
console.log('2.' window.getComputedStyle(span).display)
document.getElementById("aa").style.display = "block"

则在浏览器调控新北的结果如下:

1.inline 2.block

1
2
1.inline
2.block

二、position:static

static是默许值,表示成分未有别"positioned",position此外值表示成分被"positioned"。所以"已稳固成分"表示的正是设置position属性为除static之外的值的成分。position:static成分的布局正是依据盒子模型在不奇怪流中来构造。

使用:

貌似不要呈现钦命,除非想要覆盖在此之前安装的定位,让要素回归到平常流。

2.4 小结

对于地点对absolute的牵线,比较float属性,是或不是应该明了他们是弟兄关系吧?假若您非得不这么以为可以,只要你精晓absolute的表征就能够。绝大许多前端开拓职员应当都懂,但是如若本文只是介绍上边的知识点,就太对不起我们的期望了!上面将要介绍absolute的流体与相对脾气才是本文的根本。

三、position:relative

relative表现和static同样,除非增加了top|right|bottom|left属性。//lxy能够清楚为relative是从static到absolute的多少个连片性质状态。仿佛在inline和block中间过渡有多少个inline-block。

争持稳固成分属性设置top|right|bottom|left偏离符合规律地点后,别的因素不会调节地方来弥补偏离后剩下的空间。也足以理解为照旧据有原本空间,所以不影响别的因素结构,只怕会覆盖别的元素。

总结:relative成分依然处在符合规律流,且不改换display属性,可能会覆盖页面其余因素。

举例:

<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>

撤回注释查看设置偏移后的相比较效果:

图片 11

3. absolute流体与相对特性

四、position:absolute

position:absolute相对于这两日的"positioned" 祖先成分定位。若无“positioned”祖先成分,那么它是对峙于文书档案的 body 成分,並且它会趁机页面滚动而运动。

纯属定位成分的一直值发生冲突时的解决措施:

  • 设若还要钦点 top 和 bottom(非 auto卡塔尔国,优用 top
  • 假定还要钦赐 left 和 right,若 direction 为 ltr(英文、普通话等卡塔 尔(英语:State of Qatar),则先行选择 left;若 direction 为 rtl(英语、土耳其(Turkey卡塔尔语等卡塔尔,则优先选用right

小结几点:

position:absolute和margin,padding都不冲突,可同一时间生效。

position:absolute会更动display值,所以会发生包裹性。

position:absolute的要素脱离符合规律流。所以会时有发生破坏性。

position:absolute存在时【不加top,right,bottom,left】,float不起功用,所以能够用来去变通。

3.1 absolute的相对性情

在介绍absolute的对峙本性从前,先抛出以下难题: 如果二个要素的稳固属性设置成了:position: absolute后,未有设置left/top/right/bottom,并且其祖先成分全部是非固定成分,请问它将在哪个地方呈现?

归纳作者要好,在深远摸底absolute的特色此前,以为该因素是在浏览器窗口的左上方展现,其实那是对absolute绝对定位属性错误的认知。由此,相当多少人在接纳absolute定位属性的时候,必定先要设置父成分position: relative,同不时候设置相对定位元素的left/top/right/bottom,以至还要设置相对定位成分层级z-index实质上,该因素依然在时下的岗位。大家拿上面包车型地铁那些事例行检验证:

<!--HTML代码--> <div class="father"> <div class="pa box"></div> </div>

1
2
3
4
<!--HTML代码-->
<div class="father">
    <div class="pa box"></div>
</div>

/* CSS代码 */ .father{ border: 2px solid deeppink; width: 100px; height: 100px; } .pa{ position: absolute; } .box{ background-color: #cdcdcd; width: 50px; height: 50px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* CSS代码 */
.father{
    border: 2px solid deeppink;
    width: 100px;
    height: 100px;
}
.pa{
    position: absolute;
}
.box{
    background-color: #cdcdcd;
    width: 50px;
    height: 50px;
}

如下图所示,.box要素照旧在时下之处显得,并非在浏览器窗口的左上方展现:

图片 12

在京东商店首页,有那般的四个意义:

图片 13

接下来大家开发调试窗口,查看html和css代码如下:

图片 14

这里css代码中的top:0;left:0统统是多余的代码,能够大致不写。因为,不设置left/top/right/bottom的相对定位成分依然在这里时此刻的岗位,只是脱离了常规的文书档案流了。

实在,absolute是八个绝比较较独立的CSS属性,它的样式和行为表现不依附其余的CSS属性就能够完成。因此,万一成分设置了固定属性为absolute相对定位,而且未有设置left/top/right/bottom,那么能够将这种稳固属性称为“无依赖相对定位”,其本质就是”相对固定”,特点仅仅是退出文档流,不占用任何CSS流的尺码空间了。

无依附相对定位在其实开销中国和欧洲常常有用,上边举多少个相比常用的例子。

1卡塔尔国种种Logo定位

笔者们以慕课网首页上的课程列表举个例子:

图片 15

<div> <div class="box"></div> <i>Hot</i> </div>

1
2
3
4
<div>
    <div class="box"></div>
    <i>Hot</i>
</div>

主干CSS代码如下所示:

图片 16

一心没有必要依附top/right/bottom/leftposition: relative的拉扯就能够解决小Logo的构造啦。比较使用position:relativeright/top的布局方式,这种布局方式的独特的地方是:

  • 珍爱花销低。即便前边想删除那个图形,只供给将Logo对应的html和css代码删除掉就足以了,不会影响别的的因素
  • 健壮性高。假使图片变大可能文字变长,大家无需修正小Logo的css代码,依然定位功效不错。

再举叁个在实质上开采中用的相当多的三个例证,如下图所示,在乎气风发段文字的前面有多少个图标:

图片 17

这种布局情势相像能够依赖无依赖定位的兑现,况兼代码轻松便捷,代码如下所示:

<div class="email-wrapper"> <i class="icon-email"></i> <span class="icon-msg">请输入您的邮箱:</span> </div>

1
2
3
4
<div class="email-wrapper">
    <i class="icon-email"></i>
    <span class="icon-msg">请输入您的邮箱:</span>
</div>

.email-wrapper{ display: inline-block; height: 20px; padding-left: 20px; /*font-size: 0;*/ } .icon-email{ position: absolute; margin-left: -20px; width: 20px; height: 20px; background: url("../../lib/img/email.png") center center no-repeat; background-size: contain; } .icon-msg{ display: inline-block; line-height: 20px; vertical-align: top; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.email-wrapper{
    display: inline-block;
    height: 20px;
    padding-left: 20px;
    /*font-size: 0;*/
}
.icon-email{
    position: absolute;
    margin-left: -20px;
    width: 20px;
    height: 20px;
    background: url("../../lib/img/email.png") center center no-repeat;
    background-size: contain;
}
.icon-msg{
    display: inline-block;
    line-height: 20px;
    vertical-align: top;
}

2卡塔尔校验提醒错误

在事实上开发中,大家有许多表单校验,当校验不经过的时候,会有点不当提醒给客户,如下图所示:

图片 18

平日来说,错误提示能够停放input框的下面,可是当现身谬误提醒的时候,上面包车型客车从头到尾的经过会完全下移,当错误提醒消失的时候,下边包车型大巴剧情又会完好发展,客商体验倒霉。还会有意气风发种做法是放到input框的左双臂长度现,然而在默许状态下部容器设置了水平居中, 宽度比相当小,就算再出新错误提醒音信,就能够冒出容器的上升的幅度远远不足的题目。当时,大家肖似能够凭仗:”无凭借定位”,直接给错误提醒音讯扩充一个CSS类,如下所示:

.msg-error{ position: absolute; margin-left: 10px; }

1
2
3
4
.msg-error{
    position: absolute;
    margin-left: 10px;
}

任凭将input框的增长幅度变大只怕变小,提醒音讯都会随着input框。相比较使用position:relativeright/top的结构方式,这种格局代码量更加少、容错性更加高、维护成本更低。

关于无依靠相对定位的行使还应该有好些个,这里就不生机勃勃一介绍了,风野趣的同窗能够参考张鑫旭先生的《CSS世界》。

1、包裹性

安装了position:absolute的因素,其尺寸会降低恰巧容纳内容。

因为position:absolute会改动成分的display属性【相符浮动】,inline产生block,例如上面例子。

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

图片 19

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

3.2 absolute的流体特性

只有absolute遇到left/top/right/bottom属性的时候,absolute成分才真正变为相对定位成分。尽管客商给absolute最少钦定了left/right中的二个,则水平方向的对立性格错过,垂直方向上接二连三维持相对天性;假使顾客给absolute最少钦点了top/bottom中的二个,则维持水平方向上的对峙天性,垂直方向上的相对本性错过。比如:

<div class='box'></div> .box{ position: absolute; right: 0; }

1
2
3
4
5
<div class='box'></div>
.box{
    position: absolute;
    right: 0;
}

那个时候,成分水平方向相对个性遗失,具备了相对定位天性,而垂直方向的一向仍然维持了针锋绝对特性。

以地点的那几个例子举个例子,当只有left大概right属性的时候,由于包裹性,那时候div的宽窄是0。不过,假诺还要设置left:0;right:0的时候,宽度表现为”格式化宽度”,宽度自适应于.box含蓄快的content-box,换句话说,假如带有快的conent-box宽度产生变化,则.box的宽窄也会跟着一块儿变。比如:

<div class='box'></div> .box{ position: absolute; right: 0; left: 0; top: 0; bottom: 0; }

1
2
3
4
5
6
7
8
<div class='box'></div>
.box{
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

如果.box的隐含块是根成分,则上面包车型大巴代码能够让.box成分刚巧完全覆盖浏览器的可视窗口,相同的时间,即便退换浏览器窗口的朗朗上口,.box的深浅会随着浏览器的深浅活动生成。因而,对于设置了相对定位属性的相对化定位属性,无论设置padding如故margin,其占领的空间一直不改变,变化的就是content-box,那正是压倒一切的流体表现特性。流体性子的现实用法在后边会介绍到。

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>

图片 20

规律:和float相符,position:absolute让要素脱离正常流,而父成分还在健康流中,它们已然是多少个世界的东东了,自然撑不起父成分中度。

Note:设置position:absolute后再设置float:left不奏效,且最终计算的float值照旧none而不是设置的值。

4. absolute与此外质量

CSS中的超级多属性须求和其他的性质一同行使的时候会发生意向不到的职能。下边将介绍absolute与其他CSS一齐利用发生的作用。

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

不选择top,right,bottom,left中其余多个属性恐怕利用auto作为值。

貌似都以用absolute加margin调治地点。

比如:hot图片始终在求课文字右上角。

图片 21<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> View Code

图片 22

深入深入分析:因为position:absolute让<i>标签的display值从inline形成block,所以能够设置宽高。通过margin调度地点。

相近例子:

图片 23<!doctype html> <html> <head> <meta charset="utf-8"> <title>Logo定位二三事</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(); text-indent: -9em; overflow: hidden; } </style> </head> <body> <div class="main"> <div class="constr"> <div class="course"> <a href="" class="course-list"> <div class="course-list-img"> <span class="icon-recom">推荐</span> <img width="280" height="160" alt="分享:CSS深远了然之float浮动" src=" --><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">35十六人读书</span> </div> </a> </div> </div> </div> </body> </html> View Code

图片 24

4.1 absolute与text-align

利用text-align能够操纵相对定位成分之处,实现主窗口左边的”重返最上部”以至”反馈”等布局的魔法。效果图如下:

图片 25

主导代码如下:

<!--HTML代码--> <div class="alignright"> <span class="follow"> <img src="../../lib/img/message.png"/><img src="../../lib/img/top.png"/></span> </div>

1
2
3
4
5
<!--HTML代码-->
<div class="alignright">
    <span class="follow">
        <img src="../../lib/img/message.png"/><img src="../../lib/img/top.png"/></span>
</div>

/* CSS代码 */ .alignright{ overflow: hidden; text-align: right; } .alignright:before{ content: "2002" } .follow{ position: fixed; bottom: 100px; z-index: 1; } .follow img{ display: block; margin: 10px; width: 20px; height: 20px; background-size: contain; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* CSS代码 */
.alignright{
    overflow: hidden;
    text-align: right;
}
.alignright:before{
    content: "2002"
}
.follow{
    position: fixed;
    bottom: 100px;
    z-index: 1;
}
.follow img{
    display: block;
    margin: 10px;
    width: 20px;
    height: 20px;
    background-size: contain;
}

在本例中,利用:before伪成分,在其前方插入七个空格(二〇〇三卡塔尔,然后设置text-aligin: right,则空格对齐主构造的右左边缘,前面的定位定位成分(同相对定位成分卡塔 尔(英语:State of Qatar)由于”无依据定位”性子,左侧缘正巧便是主构造的侧面缘,自然就跑到主构造的外界显得了。这种构造在骨子里付出中用场比异常的大,比如说下图中某宝的办公大楼礼堂旅社和应接所导航功效都能够利用这种形式实现。

图片 26

4、无稳固宽高容器内相对定位成分拉伸

比喻:完结遮罩效果

图片 27<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> View Code

图片 28

同等的法规达成:全屏自适应遮罩层效果,切加上margin:auto可完结程度且直居中。

图片 29<!doctype html> <html> <head> <meta charset="utf-8"> <title>未有小幅度和冲天评释完结的全屏自适应效果by starof</title> <style> html, body { height: 百分之百; } .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> View Code

图片 30

4.2 absolute与clip

在事实上开拓进程中,超级多时候大家为了越来越好的SEO和无障碍识别,都会将页面中的一些成分掩没,比如隐蔽下边代码中的本网站名字那多少个字:

/* CSS代码 */ <a href="#" class="logo"> <h1>本网站名字</h1> </a>

1
2
3
4
/* CSS代码 */
<a href="#" class="logo">
    <h1>本网站名字</h1>
</a>

为了隐蔽上面包车型客车文字,有以下二种方案能够供大家选拔:

  • 使用display:none或者visibility:hidden。瑕玷:荧屏阅读设备会忽略那几个文字;
  • 使用text-align缩进。瑕疵:纵然缩进过大到显示器之外,显示器阅读设备也是不会读取的;
  • 使用color: transparent。原生IE8浏览器器并不帮助,而且还能够够入选文本。

依赖absolute和clip(关于clip用法不熟练的同校能够协和百度下,异常粗略,注:clip只对相对定位和永世定位的因素生效卡塔尔国那四个脾性,能够同期满意视觉上蒙蔽和荧屏阅读设备能够读取的要求,宗旨代码如下:

/* CSS代码 */ h1{ position: absolute; clip: rect(0 0 0 0); }

1
2
3
4
5
/* CSS代码 */
h1{
    position: absolute;
    clip: rect(0 0 0 0);
}

五、position:fixed

fixed是absolute的特例,相对于视窗来定位,所以页面滚动它依旧停靠在相对地方。

于是fixed也会改换成分的display属性,会让要素脱离正常流。

4.3 absolute之margin:auto居中

在实际职业付出中,大概大家用的最多的是底下的办法来促成要素的品位垂直居中效果,核心代码如下:

/* CSS代码 */ .box{ width: 20px; height: 20px; position: absolute; left: 50%; right: 50%; margin-left: -10px; margin-right: -10px; }

1
2
3
4
5
6
7
8
9
10
/* CSS代码 */
.box{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -10px;
    margin-right: -10px;
}

此方式有三个白璧微瑕便是内需提前通晓成分的尺寸,不然不大概调整margin负值的尺寸。

假如不清楚元素的尺码,能够行使transform: translate(-50%, -50%)代替margin负值,可是这种艺术存在一定的宽容性难点,IE9(-ms-), IE10 以致其它现代浏览器才支撑,在自然的场馆下会引致Wechat闪退的难点。

在介绍下其余生机勃勃种方法前,我们首先熟谙下margin: auto的填写准则:

  • 假如意气风发侧定值,少年老成侧auto,则auto为结余空间尺寸;
  • 倘诺两边都是auto,则平均剩余空间。

由此,利用相对定位absolute成分的流体个性和margin: auto的自行分配特性能够达成程度垂直居中的效果,宗旨代码如下:

/* CSS代码 */ .box{ width: 20px; height: 20px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }

1
2
3
4
5
6
7
8
9
10
11
/* CSS代码 */
.box{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

体现效果如下:

图片 31

这种方法兼用性好,并且必要超前知道元素的尺码,收缩了正视,后期维护改造之处少,何乐不为呢?

六、position和float的关系

1、position:static;position:relative和float属性可共存。

3、同一时间设置position:absolute和float,float无效。

4、设置position:absolute的因素只怕会覆盖float成分。

举例:

图片 32<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> View Code

图片 33

为啥相对定位元素可能会覆盖调换成分,因为浏览器渲染的时候相像堆集上下文中,先渲染非固定成分,再渲染浮动元素,最终渲染已定位成分。

关键难题是,那个时候设置float成分的z-index来掩没absolute无效。因为z-index值只适用于已经定位的成分(即position:relative/absolute/fixed卡塔 尔(英语:State of Qatar),对转移成分不起功能的。

可将float成分的position属性值设置为relative,然后设置z-index。因为已定位成分何况z-index不是暗许的auto的话会转换二个新的堆集上下文。

若果上边说的还不是很懂,也许想更浓郁了然z-index原理,可参看:z-index堆成堆准绳

5. 结语

关于absolute的介绍就到这里了,平常大家理应多想想,多总结,才会有新的咀嚼。布置下风度翩翩篇随笔介绍relative定位,最新篇章都会第不平时间更新在自己的众生号前端<Talkking>里面,款待关心。

以上就是本文的全体内容,谢谢阅读,假如有揭橥不得法之处,迎接留言指正!

七、能源链接

8 Box model

9 Visual formatting model

中文版CSS2/visuren

中文版CSS2/visudet/zh-hans

KB012: 绝对定位( Absolute positioning )

 

正文小编starof,因知识本人在改动,小编也在一再学习成才,作品内容也不安时更新,为防止误导读者,方便追根溯源,请各位转发注明出处:

 

block,positionfixed 风华正茂、富含块(Containing Block) 要讲position,首先就事关到五个概念:蕴涵块。 1、富含块介绍 蕴涵块老妪能解就是...

6.参考

  • 张鑫旭 《CSS世界》


    小编简单介绍:
    中文名:石头
    英文名:micstone
    某电子商务平台前端程序猿一名,不经常也写写后端代码,工作经历二零一四.7~至今。

    1 赞 2 收藏 评论

图片 34

本文由pc28.am发布于前端技术,转载请注明出处:的社会风气是怎么的,CSS浓厚掌握之absolute定位

上一篇:前端安全 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 前端安全
    前端安全
    Web 安全之 XSS 2018/05/25 · JavaScript· 1 评论 ·XSS 原文出处:今日头条技术博客    1.CSRF 2.XSS 基本概念 攻击原理 防御措施 什么是XSS 跨站脚本攻击(Cross Site
  • 说说Float那个被埋没的志向,重新认识Box
    说说Float那个被埋没的志向,重新认识Box
    什么是BFC 2016/01/09 · CSS · 2评论 ·BFC 原文出处:大搜车前端团队博客    这是我10个月前写的一篇关于BFC的文章,因为接下来要写一篇关于FFC的文章了,然
  • 移动端布局解决方案,一篇真正教会你开发移动
    移动端布局解决方案,一篇真正教会你开发移动
    后生可畏篇真正教会你付出活动端页面的篇章(后生可畏) 2017/12/07 · 基础手艺 ·3 评论 ·移动端 原稿出处:HcySunYang)    三个运动端的时期 蓬蓬勃勃、像素
  • 行代码完毕一个总结的区块链,写一个区块链
    行代码完毕一个总结的区块链,写一个区块链
    用 JavaScript 写二个区块链 2018/04/09 · CSS ·区块链 原稿出处: XavierDecuyper   译文出处:百度外送食物前端/JeLewine    大致种种人都据悉过像比特币和以太
  • 前面三个跨域知识总结,详细明白JS跨域难题
    前面三个跨域知识总结,详细明白JS跨域难题
    详解JS跨域问题 2016/10/31 · JavaScript· Javascript,跨域 原文出处: trigkit4(@trigkit4)    前端跨域知识总结 2016/11/04 · JavaScript· 2 评论 ·Javascript,跨域 本文作者