CSS中的定位、元素隐藏和显示

定位

• 实现盒子可以在一个盒子内自由移动并且压住其他盒子
• 实现滚动窗口时，盒子固定在屏幕某个位置

1. 定位组成

定位=定位模式+边偏移

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

定位模式通过CSS的position属性来设置

static	静态定位	不脱标
relative	相对定位	不脱标
absolute	绝对定位	脱标
fixed	固定定位	脱标
sticky	粘性定位	不脱标

边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

2. 静态定位（了解）

• 静态定位是元素的默认定位方式，无定位的意思
• 静态定位按照标准来特性摆放位置，没有边偏移
• 布局时很少使用

选择器 {  position:static;  } 

3. 相对定位（重要）

• 相对于自己原来的位置移动
• 在标准流中原来的位置继续占有，后面的盒子仍然以标准流的方式对待它（不会脱标）

选择器 {  position:relative;  } 

4. 绝对定位（重要）

• 相对于祖先元素的位置移动
• 若没有祖先元素或祖先元素没有定位，则以浏览器为准定位（Document文档）
• 若祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
• 绝对定位不再占有原先的位置（脱标）

选择器 {  position:absolute;  } 

“子绝父相”：子级是绝对定位的话，父级要用相对定位

1. 子级绝对定位，不会占有位置，可以放到父盒子里的任何一个地方，不会影响其他兄弟盒子
2. 父盒子需要加定位限制子盒子在父盒子内显示
3. 父盒子布局时，需要占有位置，因此父元素只能是相对定位

5. 固定定位（重要）

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

选择器 {  position:fixed;  } 

6. 粘性定位（了解）兼容性较差，IE不支持

• 可被认为是相对定位和固定定位的混合
• 以浏览器的可视窗口为参照点移动元素
• 在标准流中原来的位置继续占有
• 必须添加top、bottom、left、right其中的一个才有效

选择器 {  position:sticky;  } 

7. 定位的叠放顺序

• 在使用定位布局时，可能会出现盒子重叠的情况，此时用z-index来控制盒子的前后次序（z轴）
• 数值可以是正整数、负整数或者0，默认auto，数值越大，盒子越靠上（数字后不能加单位）
• 如果属性值相同，则按照书写顺序，后来居上
• 只有定位的盒子才有z-index属性

选择器 {  z-index:1;  } 

8. 定位的拓展

1）绝对定位的盒子居中

• 加了绝对定位的盒子不能通过margin:0,auto水平居中
• 可以通过计算方式实现水平和垂直居中

水平居中

选择器 { 
	position:absolute; 
        left:50%;
	margin-left:-(自己宽度的一半);
} 

垂直居中

选择器 { 
	position:absolute; 
        top:50%;
	margin-top:-(自己高度的一半);
} 

2）定位特殊特性

• 绝对定位和固定定位也和浮动类似
• 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
• 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容大小
• 脱标的盒子不会触发外边距塌陷
• 绝对定位（固定定位）会完全压标准流中的所有内容，而浮动元素只会压住它下面的标准流盒子，但是不会压住下面标准流盒子里面的文字
• 浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果，文字会围绕浮动元素

元素的显示和隐藏

让一个元素在页面中隐藏或显示出来

1. display

display隐藏元素后，不再占有原来的位置，搭配js可以做很多网页特效

• display:none; 隐藏对象
• display:none; 除了转换为块级元素，还有显示元素的意思

2. visibility

visibility属性用于指定一个元素应可见还是隐藏，隐藏元素后继续占有原来的位置

• visibility:visible; 元素可视
• visibility:hidden; 元素隐藏

3. overflow

overflow属性指定了如果内容溢出一个元素的框时（超过其指定高度及宽度）时，会发生什么

如果有定位的盒子，慎用overflow:hidden，因为会隐藏多余的部分（本来想要的效果被隐藏）

visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏
scroll	不管超出与否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条