【HTML07】css中的定位，absolute、fixed、relative

定位

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

1、定位的组成

定位是将盒子定在某一位置，按照定位方式移动盒子。

*定位=定位模式+边偏移*

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

通过css的position属性来设置

static：静态定位

relative：相对定位

absolute：绝对定位

fixed：固定定位

代码模式：

{position：属性}

A:相对定位：

元素在移动时，总是相对于自身原来的位置移动，最主要的是给绝对定位当爹

特点：a.它相对于自己原来位置来移动的（移动时的位置参照自己原来的位置）

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

B.绝对定位：

元素在移动时，是相对于它祖先元素来说的（拼爹型）

特点：a.如果没有祖先元素或者祖先元素没有定位，盒子以浏览器定位为准

在左下角

.left{left:0;

bottom:0;}

​ b.如果祖先元素有定位（相对、绝对、固定定位），则最近一级有定位祖先元素为参考点移动

​ c.绝对位置不保留原来为位置（脱标）

C、固定定位：

fixed

固定于浏览器的可视窗口

特点：a.以浏览器的可视窗口为参照移动点移动元素，跟父元素没有任何关系，不随滚动条滚动。

b.固定条不占有原先的位置，也是脱标的，其实固定定位可以看做一种特殊的绝对定位

固定定位怎么样贴到版心对齐：

小算法：1.走浏览器宽度的一半left：50%

2.利用margin走版心的一半margin-left：版心宽度的一半

D、粘性定位sticky：

兼容性差，一般不使用

特点：a.以浏览器的可视窗口为参照点移动

b.粘性定位占有原先的位置

c.必须添加top、left、right、bottom其中一个才有效

2）边偏移：决定该元素的最终位置

top、bottom、left、right四种属性来移动位置

*子绝父相：*

父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

1）子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

2）父盒子需要加定位限制子盒子在父盒子内显示。

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

2.定位叠放次序z-index

使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index

数值可以使正整数，负数或者0，默认值是auto，数值越大，盒子越靠上

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

数字后面不能加单位，只有定位的盒子才能有这个属性

3.定位的拓展

1）绝对定位的盒子不能通过margin：0 auto水平居中，但是可以通过算法进行水平居中

步骤：走父容器的一半 left:50%

margin负值 往左边走，走自己盒子宽度的一半 margin-left：-盒子宽度的一半。

同理，走垂直高度的一半时：

步骤： top：50%；

​ margin-top:-盒子宽度的一半

2）定位的特殊性

行内元素添加绝对或者固定定位，可以直接设置高度和宽度

块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

3）绝对定位（固定定位）会完全压住盒子

浮动元素不同，会压住他下面标准流的盒子，但是不会压住盒子下面的文字，使用浮动的原因是进行文字环绕，所以不会产生压住文字的效果。

但是绝对定位（固定定位）会压住下面所有标准流的内容

如果一个盒子既有left属性也有right属性，默认执行left属性。同理top、bottom先执行top属性。

跳转头部

结尾：
上一篇：【HTML06】浮动与清除浮动
下一篇：【JavaScript-08】函数的闭包