CSS布局之定位布局

定位布局(Position)指元素可以脱离原来的位置,定位到页面中的任意位置。

定位布局以内边距(padding)区域的左上角为定位原点,分为相对定位(包括staticrelative)和绝对定位(包括absolutefixed)。

1. 静态定位(static)

静态定位是默认的文档布局方式,表现为从左到右从上到下的布局样式。

2. 相对定位(relative)

相对定位指元素相对于原本的位置进行偏移,保留元素所占的位置,元素框定位到其他元素的上层。

// 指定position属性后,还要指定left/right/top/bottom属性
position: relative;
left: 2px;
top: 2px;

3. 绝对定位(absolute)

绝对定位指元素以非static定位的祖先元素Padding区域左上角为定位原点,进行偏移,不会保留元素所占的位置。如果祖先元素都是static定位,则以body元素为参考点。

// 同样要指定left/right/top/bottom属性
position: absolute;
left: 2px;
top: 2px;

4. 固定定位(fixed)

固定定位指元素以页面左上角为定位原点,进行定位,不会保留元素所占的位置。

// 同样要指定left/right/top/bottom属性
position: fixed;
left: 2px;
top: 2px;

补充

如果定位时,同时指定leftright属性,则元素的宽度就会确定下来;高度同理。

posted @ 2020-06-29 21:16  绝弹笔记  阅读(564)  评论(0编辑  收藏  举报