【前端】CSS（定位）

定位：将一个盒子定在某一个位置（按照定位的方式摆放并移动盒子）

定位 = 定位模式 + 边偏移

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

边偏移决定了元素的最终位置，有left，right，top，buttom四个值

静态定位（static）

静态定位是元素的默认定位，即元素在标准流中的默认位置

position: static;

在静态定位的情况下，无法通过边偏移改变元素的位置

相对定位（relative）

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

position: relative;

特点：

• 移动位置的参照是自己原来的位置

• 原来在标准流占有的位置不会改变，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

绝对定位（alsolute）

绝对定位是在元素移动的时候，是相对于它祖先元素来说的

position: alsolute;

特点：

• 如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位

• 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考移动位置

• 绝对定位不占有原来的位置（脱标）

• 绝对定位的盒子无法通过margin ： auto；来进行水平居中

• 绝对定位会压住下面标准流中的所有内容（浮动不会压住下面标准流中的文字和图片，只会压住盒子）

固定定位（fixed）

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

position: fixrd;

特点：

• 参照为浏览器的可视窗口

• 跟父元素无关联

• 不随滚动条滚动

• 固定定位不在占有原先的位置，是脱标的，是一种特殊的绝对定位

固定在版心右边

添加left/right：50%

添加margin为版心盒子宽度的一半

position:fixed;
left:50%;
margin-left:400px;//假设版心盒子宽度为800px

子绝父相：

子级采用绝对定位，父级用相对定位

• 子级绝对定位不会占有位置，可以放置在父盒子中的任意地方，不会影响其他兄弟盒子

• 父元素需加定位使得子元素在父盒子中显示

• 父级不得加绝对定位，因为绝对定位不占有位置，其中的子元素会被父元素覆盖

粘性定位（sticky）

相对定位和固定定位的混合

position: sticky;
top: 10px;

特点：

• 以浏览器的可视窗口为参照移动元素

• 占有原来的位置

• 必须添加top、bottom、left、right四个值中的一个才有效

• 一般跟页面滚动搭配使用，但兼容性较差，IE不支持

定位叠放次序（z-index）

在使用布局时，可能会出现盒子重叠的情况，可使用z-index来控制盒子的前后次序

z-index: 1;

特点：

• 数值可以是整数，默认是auto，数值越大，盒子越靠上

• 如果属性值相同，则按书写顺序叠放，后来者居上

• 数字后不得加单位

• 只有有定位的盒子才有z-index属性