position主要有static、absolute、relative、fixed和sticky五大参数,那么这几个参数之间有什么区别呢?
请看下面项目演示,看完应该就会知道答案了。
static元素,会随着排版而移动。
absolute元素会固定在所设定的位置,不会跟随HTML排版的流程移动;
absolute元素如果有卷轴的话,还是会随着卷动而移动;
absolute元素里面的absolute元素会根据absolute去定位。relative和static类似,都会随着排版而移动;
relative相比较static,具备top、right、bottom、left的设定;
absolute元素会根据relative去定位,而不会根据static定位。fixed与absolute很相似,但fixed会定位到屏幕中固定位置,不受卷动页面影响;
fixed会根据relative定位,但如果有top等位置参数,则相对body去定位。sticky当贴到顶部的时候,固定在顶部。
项目查看:
jsrun.net/ZL2Kp
项目预览: