【前端三件套——CSS定位 】网页布局大杀器

CSS定位

• 定位也是页面布局的一大重点，定位可以帮助你精准脱离文档流束缚达到你想放置的位置，可以直接理解为卫星精准导航，非常牛X

1. 元素的四个定位属性

语法： position: 属性值;

设置以上属性，便可进行边偏移，如下：

top:10px;
bottom:10px;
left:10px;
right:10px;/*与定位模式搭配使用*/

position对应的属性值就是定位的模式

1.1 静态定位static

• 所有元素默认的定位方式，静态位置，而静态位置就是在HTML文档流中的默认位置，不脱标

注意： 不可用边偏移改变位置

1.2 相对定位relative

• 相对于自己的默认位置移动定位，需要注意的是，虽然位置发生移动，但移动后的盒子不占标准流位置，且它在文档流的位置依然保留，可以理解为神游，身体还在原地占着标准流的位置

走了但没完全走

1.3 绝对定位absolute

• 位置参考为相对定位父级的左上角定点，相对地位父级，指父级或更高级具有非静态定位的定义模式，若多级均有定位，则遵循就近原则

• 自身外边距仍然保留

• 完全脱标，不占位置

• 绝对地位元素的宽高比例，来自定位父级

• 重点: 在没有定位父级时，绝对定位的参考为浏览器窗口显示区域window view

1.4 固定定位 fixed

• 以浏览器窗口为参照物，也就是无论页面如何滑动，fixed定位模式的盒子永远相对浏览器窗口禁止

• 易知，该定位模式的盒子也是完全脱标，不占用标准流的位置

2. 子绝父相

• 这是布局中最常用的结构,结构父级为相对定位relative，需要定位的子元素为绝对定位absolute

  (当然，也更可根据实况，将父级定位模式更改为fixed 或 absolute)

3. 绝对定位的盒子水平/垂直居中

从往期我们知道，普通盒子左右margin改为auto就可以了，但对于绝对定位，就无效了

我们有了新的方法：

1. 用left : 50% ;，top : 50 % ;后再各自往回走自己盒子的一般宽高即可

   上述方法较为麻烦,比较推荐下面的方法

2. top : 0;
   left: 0;
   bottom:0;
   right:0;
   margin:auto;
   

4. 叠放次序

语法：

z-index:number;

• 多个元素同时设置定位是,定位元素之间会有重叠，它不像浮动排列，因为每个定位是独自开辟一个空间,默认z-index为0，相同值之间，后面的盒子会覆盖前面的盒子
• 设置的z-index越大，就优先呈现，也就是覆盖比它小的
• 注意，复杂的元素定位结构中，同子级但非兄弟，就是异父情况下，想拼爹的z-index，谁大谁上面，一样大在拼儿

小tip：

定位跟浮动一样，设置绝对定位和固定定位后，元素模式也会发生改变，都转换为块级元素

5. 注意

由于定位脱标且独自新开文档流层级，高度依赖会导致浏览器的压力增大，维护成本也高

设置绝对定位和固定定位后，元素模式也会发生改变，都转换为块级元素

5. 注意

由于定位脱标且独自新开文档流层级，高度依赖会导致浏览器的压力增大，维护成本也高

因此在实际开发中，优先考虑文档流+盒子模式，再考虑浮动，最后才考虑定位