CSS定位属性可以帮助我们更精细的布局网页元素,下面我们来学习一下如何使用定位属性。
position: static;
默认属性,元素按照文档流进行布局。
position: relative; top: 10px; left: 20px;
将元素相对于原位置进行移动,top和left属性可以控制移动的距离。
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
将元素相对于最近的非static定位祖先元素定位,默认为body,top和left属性可以控制相对位置,使用transform属性使其居中。
position: fixed; top: 10px; left: 20px;
将元素相对于浏览器窗口进行定位,top和left属性可以控制相对位置。
z-index: 1;
定义元素的堆叠顺序,数值越大越靠上。
以上就是常用的CSS定位属性,合理运用它们可以让页面布局更加美观和合理。