div+css 精准定位浅析

2020-10-26 21:02 jianzhan
今日科学研究了1下,终于有一定的掌握。在此总结1下:
先看下各个特性值的界定:

1、static:默认设置值。沒有精准定位,元素出現在一切正常的流中(忽视 top, bottom, left, right 或 z-index 申明)。

2、relative:转化成相对性精准定位的元素,根据top,bottom,left,right的设定相对其一切正常部位开展精准定位。可根据z-index开展层级等级分类。

3、absolute:转化成肯定精准定位的元素,相对 static 精准定位之外的第1个父元素开展精准定位。元素的部位根据 "left", "top", "right" 和 "bottom" 特性开展要求。可根据z-index开展层级等级分类。

4、fixed:转化成肯定精准定位的元素,相对访问器对话框开展精准定位。元素的部位根据 "left", "top", "right" 和 "bottom" 特性开展要求。可根据z-index开展层级等级分类。

static与fixed的精准定位方法较好了解,在此不做剖析。下应对运用的较多的relative和absolute开展剖析:

1、relative。精准定位为relative的元素摆脱一切正常的文字流中,但其在文字流中的部位仍然存在。如图1:

图1

黄色情况的层精准定位为relative,鲜红色边框地区为其在一切正常流中的部位。在根据top、left对其精准定位后,从灰色情况层的部位能够看出其一切正常部位仍然存在。

2、absolute。精准定位为absolute的层摆脱一切正常文字流,但与relative的差别是其在一切正常流中的部位不在存在。如图2:

图2

能够看到,在将黄色情况层精准定位为absolute后,灰色情况层全自动补上。

3、relative与absolute的关键差别:

最先,是上面早已提到过的在一切正常流中的部位存在与否。

其次,relative精准定位的层一直相对其近期的父元素,不管其父元素是何种精准定位方法。如图3:

图3

图中,鲜红色情况层为relative精准定位,其立即父元素翠绿色情况层为默认设置的static精准定位。鲜红色情况层的部位为相对性翠绿色情况层top、left个20元素。而假如鲜红色情况层精准定位为absolute,则情况如图4:

图4

能够看到,鲜红色情况层仍然界定top:20px;left:20px;但其相对性的元素变成精准定位方法为absolute或relative的黄色情况层。因而,针对absolute精准定位的层一直相对其近期的界定为absolute或relative的父层,而这个父层其实不1定是其立即父层。假如其父层中都待定义absolute或relative,则其将相对性body开展精准定位,如图5:

图5

除top、left、right、bottom精准定位外,margin特性值的界定也合乎上述标准。