在html中,各个position参数的区别,附带详细案例

2020年5月8日前端开发评论101,654字数 458阅读1分31秒阅读模式

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

项目预览:

匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定