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

2020年5月8日 评论 1,063

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

项目预览:

WordPress编辑器如何给文章分页? 网页前端

WordPress编辑器如何给文章分页?

不知道为什么WordPress明明有文章分页功能,而编辑器却没有插入分页符的按钮,必须切换到文本模式输入<!--nextpage-->才能插入分页。可以通过下面的代码在编辑器上添加一个分页...
匿名

发表评论

匿名网友 填写信息

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