单词
fixed 固定的、不变的
static 静止的、静态的
sticky 粘性的、沾性的
1)静态定位:static(默认值)
2)绝对定位:position:absolute;
也有四个属性:left、right、top、bottom;
如果没有可以定位的父元素属性,那定位的点top默认为页面的左上角,bottom定位的点为当前打开的窗口的首屏窗口的页面的左下角;
如果有定位的父元素(无论绝对定位还是相对定位),那该定位以父元素的border为坐标轴确定位置;
3)相对定位:position:relative;
有四个属性:left、right、top、bottom;
相对定位是相对于他本来的位置进行定位,本来的位置依旧被保留,相当于这个标签定位后的位置是被投射出来的影子,本体没有动;
4)固定定位:position:fixed;
也有四个属性:left、right、top、bottom;
这个属性是以浏览器的窗口为定位的坐标轴;
5)粘性定位:position:sticky;
有四个属性同上;
粘性定位在该标签未到设定的阈值时,就在本来的位置,在到达阈值后相当于是固定定位,以浏览器窗口为定位点;
例:设定阈值为top:50px;在浏览器窗口上部距离该标签50px时,就会变成固定定位,距离浏览器上部50px处固定;(但是该标签原始位置仍会被保留,暴露父元素的背景色)
定位的层级:HTML标签中,两个定位的标签重叠时靠下的标签会盖住靠前的标签;
z-index:0; 这个属性就是为了给定位的属性加Z轴的高度,后面的数值越大越高,也就越先显示,默认的层级是0,最小可以为负值,一般是为了加背景色;
(z-index的默认值为auto)
锚点,在标签中加入一个ID名,在超链接标签的路径里加入#id名,这个超链接标签就可以跳转到这个标签所在的位置;