css基础笔记5-定位

定位

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

静态定位

静态定位是元素的默认定位方式，无定位的意思

语法：选择器{position:static;}

静态定位按照标准流特性摆放位置，它没有边偏移

相对定位

语法：选择器{position:relative;}

相对定位是元素在移动位置的时候，是相对它原来的位置来移动位置的，参照点是自己原来的位置。

注意：相对定位移动后，它原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它，也就是说，相对定位的元素移动不影响后面的其他元素，其他元素只会根据相对定位移动前的位置来排放。因此，相对定位并没有脱标（脱离文档流）。

相对定位前：

 

相对定位后：

 

绝对定位

语法：选择器{position:absolute;}

移动位置的时候是相对于它的祖先元素来说的

特点：找离它最近的有定位的（相对，绝对，固定定位）祖先元素，如果找不到，则以浏览器为准来定位（Document文档）。不再占用原来的位置（脱标）

在做网页的时候推荐用子绝父相的定位模式来做，因为如果不给父元素加相对定位，而是其他的定位，那父元素就会脱离文档流，使得后面的元素位置会到前面来。当然，如果不需要父元素占有位置，那子绝父绝也行。

固定定位

语法：选择器{position:fixed;}

元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

特点：以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动。固定定位不再占有原先的位置（脱标）其实可以看做一个特殊的绝对定位。

固定定位小技巧:固定到版心右侧：

给一个小盒子一个固定定位，left给50%，margin-left给版心宽度的一半就行了。

一开始对为什么给一个margin-left它还能往右走产生了疑惑，后面想到了，其实margin和padding把盒子撑开，这个说法并不太准确，我个人认为，margin和padding其实也是属于整个盒子的大小的，只是我们看不见，而我们给盒子定义的width和height其实只是盒子大小的内容区，并不是整个盒子大小，而给了margin-left后盒子的左边变大了，整个盒子也变大了，这时的定位是根据盒子的左上角的开始算的，也就是变大的盒子的（margin出来的部分）左上角，这样那个到版心的盒子内容就说得通了。

粘性定位

语法：选择器{position:sticky;}

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

特点：以浏览器的可视窗口为参照点移动元素（固定定位的特点），占有原先的位置（相对定位特点），必须添加top,left,right,bottom其中一个才有效。兼容性比较差，IE不支持，不常用。

用法：加上top属性后，该元素在页面滚动到该元素离可视窗口top值的时候变成粘性定位，其实就像是固定定位。

定位的总结：

 

定位叠放次序

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

语法：选择器{z-index:1;}

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

绝对定位的盒子居中运用：

水平居中：

{position:absolute;left:50%;margin-left:盒子自己宽度的一半的负值;}

垂直居中：

{position:absolute;top:50%;margin-top:盒子自己高度的一半的负值;}

定位的特殊性：

绝对定位和固定定位也和浮动类似，行内元素添加绝对或者固定定位，可以直接设置高度和宽度。块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。脱标的盒子不会触发外边距塌陷。

绝对定位和固定定位会完全压住盒子，浮动元素不同，只会压住它下面标准流的盒子，，但是不会压住下面标准流盒子里面的文字（图片），但是绝对定位和固定定位会压住下面标准流所有的内容，浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。

如果同时存在left和right属性则会默认执行left属性，同时有top和bottom则会默认执行botto，先左后右，先上后下。