定位的概念（HTML）

---

前言

HTML中为什么需要定位？

1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子

2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

一、定位

1.定位的组成

定位=定位模式+边偏移

     定位模式：定位模式用于指定一个元素在文档中的定位方式。

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

代码如下（示例）：

2.定位模式

1、static 静态定位 (默认)

书写规范：

选择器 { position：static；}

2、relative 相对定位

书写规范：

选择器 {position ：relative；}

3、absolute 绝对定位

书写规范：

选择器 {position：absolute；}

4、fixed 固定定位

书写规范：

选择器 {position：fixed；}

5、粘性定位sticky （了解）

书写规范：

选择器 {position：sticky；}

3.边偏移

有四个值：

top         顶端 偏移量，定义元素相对于其父元素 上边线 的距离

bottom   底部 偏移量，定义元素相对于其父元素 下边线 的距离

left         左侧 偏移量，定义元素相对于其父元素 左边线 的距离

right       右侧 偏移量，定义元素相对于其父元素 右边线 的距离

4.定位的叠放顺序

书写规范：

选择器 { z-index : 1;}

• 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越考上
• 如果相同属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有 z-index 属性

---

二、定位的扩展

1、绝对定位盒子的居中算法

加了绝对定位i的盒子不能通过 margin：0 auto；水平居中，但是可以通过以下计算方法实现水平和垂直居中。
（1）left：50%； ：让盒子的左侧移动到父级元素的水平中心位置。
（2）margin-left : -100px; : 让盒子向左移动自身宽度的一半。

2、定位的特殊性

绝对定位和固定定位也和浮动类似。
（1）行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
（2）块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。