CSS中定位属性的使用
网页元素默认占用文档流,插入或生成元素后,其将默认按照从左到右的顺序依次排列,这将导致页面中的各种元素因空间占用问题难以被设计至目标效果。
若将整个页面看做一个二层透明,底层白色的双层结构的俯视,那我们可以简单的理解为『大部分元素默认占用底层空间』,但是各种元素共一层,每个个体都占有一部分空间,那么将导致我们无法把操作的元素放置到俯视视角的目标位置。
为了摆脱底层的空间占用限制,有效利用二层空间帮我们达到目标效果,可以使用CSS中的定位属性,添加了定位属性的元素将拥有”浮动”效果,会脱离文档流(可简单理解为脱离上面说的白色底层),进入漂浮状态,即可以使用”二层空间”,可达到这样漂浮效果的还有display:float、z-index等,本篇主要讲position属性(定位属性)。
position属性用于为目标元素确定位置(确定漂浮态位置),其后可以跟从6种定位方法(其中position:static、position:relative无法使目标元素脱离文档流):
position:static
position:fixed
position:relative
position:absolute
position:inherit
position:sticky
接下来依次阐述
position:static
定位属性的默认值,即『无定位』,目标元素将依然存在于正常文档流中,使用此种定位与不对目标元素施加定位将会是同种效果,对受static影响的元素设置right,bottom,top,left将无效,同样的其他元素若相对受static影响的元素设置left,bottom,right,top也将无效。对其设置margin和padding有效。
position:fixed
这种定位方法被称为“固定定位”,这种方法以浏览器边框作为参照,注意这里的 参照 不受浏览器边框尺寸变化影响,其以可视窗口作为参照物,改变浏览器可视窗口显示尺寸后目标元素与浏览器边框的距离不会改变,如此定位的元素也不受上下左右滚动条的影响,其会随着底层和漂浮层移动,与其保持相对静止,常看到跟随屏幕滚动的“回到顶部”就是利用JS和该定位制作。可以使目标元素脱离文档流进入漂浮状态。后面添加left,right,top,bottom来对位置进行调整,浏览器的坐标系坐标原点在左上角,依据此来进行调整(建议用截图工具测量)
1 | <style> |
position:relative
这种定位方法被称为“相对定位”,所谓“相对”既是相对定位前其在正常文档流中的位置(的左上角为坐标原点)进行定位,移动受relative影响的元素时这个元素原本所占的空间依然在原处不改变,可以对其设置right,left,top,bottom进行目标元素位置的调整。另外受这种定位影响的元素可以被受position:absolute影响的元素选中为“包含者”来作为自身absolute定位的参照物,absolute会以就近原则选择距离自己最近的受定位的父元素作参照,这个特点便是“子绝父相”(这种叫法并不严谨),在编写时可以父元素使用相对定位,子元素使用绝对定位,避免调整元素时导致其他元素错位。
position:absolute
这种方法被称为“绝对定位”,会选取与受定位元素辈分最近的、已经 受到定位的、父级元素 进行定位,前提是这个父级元素受到的定位不是position:static。跟从上方所说,这种定位方法设置了“子绝父相”结构的组成部分——子元素部分 的位置,利用“受到absolute定位的元素会选取距离自己最近的受到定位的父元素进行定位”的特点,可以将受到absolute影响的元素放入受到relative定位的元素中作为其子元素,这样在后面调整某个模块时仅调节relative定位的父元素即可让整个模块完好的移动。
1 | <style> |
position:inherit
我一直觉得这种定位方法很特殊……inherit也可以作为其他属性的值来使用,这里我只说它跟在position后时的情况,“inherit”这个单词的意思为“继承”,它在定位中的用途也一如它的汉意:受inherit影响的元素将会使用与其父元素相同的定位方式,注意是仅继承定位方式,而不一定会以父元素作为参照来定位。可以对其设置right,bottom,left,top来进行定位,具体定位规则依据继承来的不同的定位而不同。因为其与上级元素两元素间有父子关系,所以被称作 定位:继承;
1 | <style> |
position:sticky
这种方法被称为“粘性定位”,受粘性定位的元素依据页面滚动,在position:relative与position:fixed两定位方法之间进行切换。在页面的滚动不超出目标区域时,它的表现更加偏向position:relative; 而当页面滚动超出目标区域时,它的表现更加偏向position:fixed它会将目标元素固定在目标位置。其定位表现是:在跨越特定阈值前为相对定位的定位方法,超过阈值之后为固定定位的定位方法(可以拿这个来做“回到顶部”)。这个特定阈值指的是 top, right, bottom 或 left 之一,也就是仅指定 top, right, bottom 或 left 四个阈值之一,才可使粘性定位生效,否则其行为与相对定位相同。
1 | <style> |
在对页面上的元素进行设计时,优先设置主体(页面主体)元素作为页面中心,以其作为原点进行其他元素的定位,可以防止中途定位某个元素时其他元素跟着动的尴尬情况,减少不必要的工作量,方便后期修改。
以上是我据本阶段的学习得出的一些经验与心得,如果对您起到帮助,在下十分荣幸;若是您发现了我的不足,恳请您的指点!