定位

定位

1.基本定义

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

• static 自动定位（默认定位方式）
• relative 相对定位，相对于其原文档流的位置进行定位
• absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
• fixed 固定定位，相对于浏览器窗口进行定位

绝对定位和固定定位会变成行内块

2.相对定位relative：

相对定位是将元素相对于标准流的位置进行定位，当position属性的取值为relative时，可以将元素定位在相对位置

虽然可以改变其位置，但是它在文档流的位置依旧保留
注意：

1. 相对定位可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2. 每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
   如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。
   3.属性值：

• left
• right
• top
• bottom

3.绝对定位absolute：

绝对定位通过边偏移实现，它是完全脱标，完全不占有位置

1. 相对于最近已定位的祖先元素进行定位
2. 若父级元素一个都没有定位则以浏览器为准对齐

适用：
子元素相对于父元素的位置永远固定不变（二级弹出，图片轮播）

4.固定定位 fixed：

1. 相对于浏览器窗口
2. 脱离文档流

5.子绝父相：

1. 因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

2. 父盒子布局时，需要占有位置，因此父亲只能是 相对定位.

6.定位相对于父盒子居中

left:50%;
margin-left:  px;
top:50%;
margin-top:  px;

7.定位后覆盖问题：

1. 两个元素都设置了定位，html结构中后面的元素会覆盖前面的元素
2. 子级元素永远覆盖父级元素，不可更改
3. 改变兄弟级别覆盖顺序：z-index属性
   属性值越高，显示在越上层