定位、显示和隐藏

一、定位

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

2、定位=定位模式（元素在文档中的定位方式）+边偏移（该元素的最终位置）

二、定位的分类

静态定位（static）：

格式： 选择器{ position：static；} 

是元素的默认定位方式，无定位

注：1、按照标准流特性摆放位置，没有边偏移 2、布局很少用到

相对定位（relative）：

格式：选择器{position：relative；}

1、移动时参照的是自己原来的位置

2、不脱标，继续保留原来位置

绝对定位 （absolute）：

格式：选择器{ position：absolute；}

1、没有祖先元素或祖先元素没有定位，则以浏览器为参照

2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参照

3、绝对定位不再占有原来的位置（脱离标准流）

4、加了绝对定位的盒子可以直接设置高度和宽度

注：子绝父相：子级使用绝对定位，父级则需要使用相对定位

总结：因为父级需要占有位置，因此只能用相对定位，子盒子不需要占有位置，则是绝对定位

固定定位（fixed）：

格式： 选择器{ position：fixed；}

1、以浏览器的可视窗口为参照 （跟父元素没有任何关系，不随滚动条滚动）

2、不占有原先的位置（脱标，可以看作一种特殊的绝对定位）

粘性定位（sticky）：

格式 ：选择器{ position：sticky；}

1、以浏览器可视窗口为参照

2、占有原先的位置

3、必须添加一个边偏移才有效

三、定位的技巧

1、固定定位小技巧：固定在版心右侧的位置（也就是主体部分的右侧）

①、让固定定位的盒子left：50%走到浏览器版心的一半位置

②、让固定定位的盒子margin-left：版心宽度的一半距离。

2、定位的叠放次序（z-index）：

格式：选择器 {z-index：1；} （相当于三维坐标里的z轴）

①、数值可以是任何值，默认是auto，数值越大，盒子越往上

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

③、数字后面不能加单位

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

3、绝对定位的盒子水平居中：

加了绝对定位以后就不能通过margin：0 auto 水平居中   （垂直居中也是一样）

①left：50%；让盒子的左侧移动到父级元素的水平中心位置

②、margin-left：盒子自身宽度的一半

4、绝对定位和固定定位也和浮动类似

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

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

5、脱标的盒子不会触发外边距塌陷（外边距合并）

①、绝对定位（固定定位）会完全压住盒子（包括图片、文字）

②、浮动元素只会压住它下面标准流的盒子，但不会压住标准流盒子里面的文字、图片

四、元素的显示和隐藏

1、display：none；隐藏对象  display：block； 显示被隐藏对象   隐藏元素后，不再占有原位置

2、visibility 可见性  visibility：visible；元素可视   visibility：hidden元素隐藏    隐藏元素后，继续占有原来的位置

注：如果隐藏元素想要原来的位置，用 visibility：hidden
       如果隐藏元素不想要原来的位置，用display：none

3、overflow

①、visible （默认）不剪切也不添加滚动条

②、hidden  隐藏溢出部分

③、scroll 不管是否溢出，都显示滚动条

④、auto 当内容溢出时，显示滚动条，不溢出不显示