CSS布局之定位布局
2021-01-28 17:14
标签：osi pos 就会 考点 默认 固定 其他 区域 上层 定位布局以 静态定位是默认的文档布局方式，表现为 相对定位指元素相对于原本的位置进行偏移，保留元素所占的位置，元素框定位到其他元素的上层。 绝对定位指元素以 固定定位指元素以页面左上角为定位原点，进行定位，不会保留元素所占的位置。 如果定位时，同时指定 CSS布局之定位布局 标签：osi pos 就会 考点 默认 固定 其他 区域 上层 原文地址：https://www.cnblogs.com/juetan/p/13210376.html定位布局(Position)指元素可以脱离原来的位置，定位到页面中的任意位置。内边距(padding)区域的左上角为定位原点，分为相对定位(包括static及relative)和绝对定位(包括absolute及fixed)。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;
补充
left和right属性，则元素的宽度就会确定下来；高度同理。