relative作为absolute父标签
默认absolute相对于body定位,此方法限制它的位置在relative内;
默认abolute z-index越高层级越高,此方法限制了abolute的层级,relative父标签层级越高子标签abolute才越高,比如一个子标签abolute z-index:3,父标签z-index:1,另一个子标签abolute z-index:2,父标签z-index:3,则第二个absolute的层级要高
默认overflow:hidden对absolute超出范围隐藏无效,此方法relative父标签添加overflow:hidden则会隐藏超出范围
absolute受到relative的许多限制
限制范围,
限制层级,
限制超越overflow。
1、relative对absolute、fixed的影响:
1)relative会限制absolute的left、top、right、bottom定位,使得absolute的top、left等是相对于relative所设定的边界的,而不是相对于浏览器的左上角
2)relative会限制absolute的z-index层级,absolute设置的层级对它自己已经不再有用,而是要看relative设置的层级的大小
3)relative限制absolute的overflow,(overflow:hidden;的隐藏)/(overfolw:auto、scroll;的滚动条)对absolute是不起作用的,但是relative会使得absolute受overflow的限制
4)relative只能限制fixed的z-index层级
relative与fixed的关系
relative和abolute的关系
relative可以限制absolute:
1,位置限制;
2,Z-index限制,absolute站在relative的肩膀上(当relative的Z-index为auto的时候,则无此显示;除了IE6,IE7)
3,限制超越relative的overflow
relative对absolite的限制作用