CSS Position 应用详尽小结

2021-01-20 14:21 jianzhan

1. position:static

全部元素的默认设置精准定位全是:position:static,这代表着元素沒有被精准定位,并且在文本文档中出現在它应当在的部位。

1般来讲,无需特定 position:static,除非要想遮盖以前设定的精准定位。

#div⑴ {
 position:static;
}

2. position:relative

假如设置 position:relative,便可以应用 top,bottom,left 和 right 来相对元素在文本文档中应当出現的部位来挪动这个元素。【意思是元素具体上仍然占有文本文档中的原来部位,只是视觉效果上相对它在文本文档中的原来部位挪动了】

#div⑴ {
 position:relative;
 top:20px;
 left:⑷0px;
}

3. position:absolute

当特定 position:absolute 时,元素就摆脱了文本文档【即在文本文档中早已不占有部位了】,能够精确的依照设定的 top,bottom,left 和 right 来精准定位了。

#div⑴a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

4. position:relative + position:absolute

假如大家给 div⑴ 设定 relative 精准定位,那末 div⑴ 内的全部元素都会相对性 div⑴ 精准定位。假如给 div⑴a 设定 absolute 精准定位,便可以把 div⑴a 挪动到 div⑴ 的右上方。

#div⑴ {
 position:relative;
}
#div⑴a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. 两栏肯定精准定位

如今便可以应用相对性精准定位和肯定精准定位来做1个两栏合理布局了。

#div⑴ {
 position:relative;
}
#div⑴a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div⑴b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

6. 两栏肯定精准定位定高

1种计划方案是给元素设置固定不动高宽比。但这类计划方案对大多数数设计方案来讲不太合适,由于1般大家不知道道元素中会有是多少文字,或即将应用的精准的字号。

#div⑴ {
 position:relative;
 height:250px;
}
#div⑴a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div⑴b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

7. 波动

针对可变高宽比的列来讲,肯定精准定位就不起功效了,下列是此外1个计划方案。

大家能够波动1个元素,使它挪动到左侧/右侧,而且是文字围绕着它。这关键用于图象,但这里大家把它用于1个繁杂的合理布局每日任务(由于这是大家唯1的专用工具)。

#div⑴a {
 float:left;
 width:200px;
}

8. 波动列

假如大家把1个元素向左波动,而且把第2个元素也向左波动,they will push up against each other。

#div⑴a {
 float:left;
 width:150px;
}
#div⑴b {
 float:left;
 width:150px;
}

9. 消除波动列

在波动元素以后,大家能够消除波动来使别的元素正明确位。

#div⑴a {
 float:left;
 width:190px;
}
#div⑴b {
 float:left;
 width:190px;
}
#div⑴c {
 clear:both;
}

糖伴番茄说:尽管我1直用波动合理布局,可是把握好 position 也是务必的,实际上也没那末难的。。。

原文来自經典的:Learn CSS Positioning in Ten Steps

填补表明:
以前老弄不搞清楚,只能凭着1点短期内内
“虐出来的工作经验”制做必须的实际效果,后来细心科学研究了1下Hutia的XScroller,而且细心
看了文本文档,才了解这个position特性实际上是指本体对上级的精准定位。假如这么了解,就好
办了。

默认设置的特性值全是static,静态数据。就无需多说了。最重要的是
relative(相对性)和absolute(肯定)。
常常大家假如是COPY他人的编码,会把absolute特性与left、top相互配合起来制做有关的
“飘浮层”实际效果。但是有时大家必须对于某1个器皿的飘浮实际效果,而并不是对于对话框的
。这时候候根据高宽比、宽度的测算不仅不便,并且基本上没法完善完成实际效果。我1刚开始也无
能为力,后来发现要是把其上1级的款式特性position设定为relative便可以了。

也便是说,position的特性值的实际效果,立即受其器皿款式中position特性值危害。
比如以下A-B的嵌套循环构造

<div id="A">
<div id="B">
</div>
</div>
当A的position为relative时,B的position为absolute才合理。这时候候left:0、top:0
就已不对于对话框文本文档,而是对于id为A的这个div了。

这样在开发设计1些根据B/S运用程序流程的情况下,就可以很便捷的加上1些UI元素,比如某1个
主题活动层的关掉按钮等。