CSS的定位

CSS的定位

1. 定位的必要性

• 浮动可让多个块级盒子一行没有缝隙地排列显示，常常用于横向排列盒子
• 定位则是可让盒子自由地在某个盒子内移动位置或者固定在屏幕中的某个位置，而且能够压住其它盒子

2. 定位的组成

定位=定位模式+边偏移

定位模式：用于指定一个元素在文档中的定位方式，经过position属性设置。

属性值	说明
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移：决定了该元素的最终位置。

边偏移属性	示例	描述
top	top: 10px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom: 10px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left: 10px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right: 10px	右侧偏移量，定义元素相对于其父元素右边线的距离

3. 定位模式

3.1 静态定位static

元素的默认定位方式，无定位的意思。

选择器 {
    position: static;
}

• 按照标准流特性摆放位置，没有边偏移
• 在布局时不多用到

3.2 相对定位relative

元素在移动位置的时候，是相对于它原来的位置来讲的。

选择器 {
    position: relative;
}

特色：

1. 移动位置的时候参照点是本身原来的位置
2. 不脱标，继续保留原来的位置，即原来在标准流的位置继续占有

3.3 绝对定位absolute

元素在移动位置的时候，是相对于它父级元素来讲的。

选择器 {
    position: absolute;
}

特色：

1. 若是没有父级元素或父级元素没有定位，则以浏览器为准定位
2. 若是父级元素有定位（相对、绝对、固定），则以最近一级有定位的父级元素做为参考点移动
3. 脱标，再也不占有原来的位置

绝对定位小技巧：绝对定位的盒子居中

加了绝对定位的盒子不能经过margin: 0 auto设置水平居中，解决方案以下。

1. 让绝对定位的盒子left: 50%，走到父级盒子的一半位置

2. 让固定定位的盒子margin-left: 自身宽度的一半距离

3.4 固定定位fixed

元素固定于浏览器可视区的位置，能够在浏览器页面滚动时元素的位置不会改变。

选择器 {
    position: fixed;
}

特色：

1. 以浏览器的可视窗口做为参考点移动
2. 跟父元素没有任何关系
3. 不随滚动条滚动
4. 脱标，再也不占有原来的位置

固定定位小技巧：固定在版心右侧位置

1. 让固定定位的盒子left: 50%，走到浏览器可视区的一半位置

2. 让固定定位的盒子margin-left: 版心宽度的一半距离

3.5 粘性定位sticky

粘性定位能够被认为是相对定位和固定定位的混合。

选择器 {
    position: sticky;
    top: 10px;
}

特色：

1. 以浏览器的但是窗口做为参照点移动（固定定位特色）
2. 不脱标，占有原来的位置（相对定位特色）
3. 必须添加top、left、right、bottom其中一个才有效
4. 跟页面滚动搭配使用，兼容性较差，ie不支持

4. “子绝父相”的由来

“子绝父相”：子级是绝对定位的话，父级要用相对定位。

• 子级绝对定位，不占有位置，能够放到父级盒子里的任何一个地方，不会影响其它兄弟盒子
• 父级盒子须要添加定位限制子盒子，使得子盒子只能在父级盒子内显示
• 父盒子布局时，须要占有位置，所以父级盒子只能是相对定位

相对定位常常用来做为绝对定位的父级。

一句话总结，由于父级须要占有位置，所以是相对定位，子盒子不须要占有位置，则是绝对定位。

注：若父级盒子不须要占有位置，“子绝父绝”也会遇到。

5. 定位模式总结

定位模式	是否脱标	移动位置	是否经常使用
static 静态	否	不能使用边偏移	不多
relative 相对	否	相对于自身位置移动	经常使用
absolute 绝对	是	带有定位的父级盒子	经常使用
fixed 固定	是	浏览器可视区	经常使用
sticky 粘性	否	浏览器可视区	当前阶段少

6. 定位叠放次序z-index

控制盒子的先后次序（z轴）。

选择器 {
    z-index: 1;
}

• 数值能够是正整数、负数或0，默认值auto，数值越大，盒子越靠上
• 若是属性值相同，则按照书写顺序，后来者居上
• 数字后面不能加单位
• 只有定位的盒子才有这个属性

7. 定位的拓展

7.1 定位的特殊特性

绝对定位、固定定位也和浮动相似。

1. 行内元素添加绝对定位或固定定位，能够直接设置高度和宽度
2. 块级元素添加绝对定位或固定定位，若是不指定width/height，默认大小是内容的大小

7.2 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位、固定定位的元素都不会触发外边距合并的问题。

7.3 绝对定位、固定定位会彻底压住盒子

• 浮动元素只会压住它下面标准流的盒子，可是不会压住它下面标准流盒子里的文字/图片。（缘由：浮动产生的最初目的是为了左文字环绕效果的，文字会围绕浮动元素。）
• 绝对定位、固定定位会压住它下面标准流里的全部内容

8. 网页布局总结

一个完整的网页，是标准流、浮动、定位一块儿完成布局的，每一个都有本身的专门用法。

1. 标准流

   可让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

2. 浮动

   可让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

3. 定位

   定位最大的特色就是有层叠的概念，就是可让多个盒子先后叠压来显示。若是元素自由在某个盒子内移动就用定位布局。