定位(相对定位、绝对定位、固定定位)

定位:调整元素到网页一个指定位置,让元素处于一个完全脱离文档流的状态,即不会影响到其他元素的位置(和浮动半脱离文档流相比,浮动会影响到其他元素的位置)

相对定位relative:相对于元素在正常文档流的位置的相对定位位置。四个偏移量,默认是0的时候,以元素标准流的四个角度为参考点,水平方向:left:正值向右,负值向左;right:正值向左,负值向右;垂直方向:top:正值向下,负值向上;bottom:正值向上,负值向下。

绝对定位absolute:完全脱离文档流,可以将绝对定位属性的元素设置到网页中一个具体的坐标位置,默认参考点为网页的左上角,即left和top为0的时候,left和right指的是网页的左和上,right和bottom指的是窗口第一屏的右和下(注意是窗口第一屏,如果给绝对定位属性的元素设置right和bottom的值皆为0,那么该元素会在窗口第一屏的右下角,当网页内容超过第一屏向下移动后,该元素的位置仍然保持不变,不会移动到下一屏网页的右下角)。

给元素设置为绝对定位后,设置宽高起作用,设置为相对定位仍然不起作用。

相对定位和绝对定位配合使用:若要让某一个元素跟随其父元素(或祖先元素)保持原来的两元素之间的相对位置一起移动,则要采用“子绝父相”的定位方式:子和父指的是标签之间的关系,绝和相指的是给后代元素设置绝对定位,给祖先元素设置相对定位,此时后代元素默认的参考点是离其最近的设置为定位(包括相对定位和绝对定位)的祖先元素的四个角的参考点。

层级(z-index):给元素设置定位后,层级默认都是0,当层级相同时,后写的标签会压在先写的标签的上面,当层级不同时,则层级大的标签会压在层级小的标签上。层级值的取值范围为整数,包括负整数、0、正整数。

绝对定位元素水平垂直居中父元素:当元素设置为绝对定位后,要想水平(或垂直)居中于父元素,则应该设置left(或top)的值为50%,然后再设置margin-left(或margin-top)的值为负的该元素一半的宽度大小。因为当left(或top)的值为50%时会将元素的左边框移到父元素的居中位置,那么就还需要将该元素向左(或上)移动该元素宽度的一半距离,以使元素的中央对齐到父元素的中央位置。

固定定位fixed:将元素固定在浏览器的某个坐标位置,默认参考点是浏览器,要注意将元素设置为固定定位后不再是块级显示模式,不会继承父元素的宽度,所以要明确设置好宽度。

原文地址:https://www.cnblogs.com/NIFS/p/12625835.html