css基础之定位、元素的显示与隐藏

定位

一、定位position组成

定义=定位模式+边偏移，

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

通过css的positon属性设置，其值分为四个:
静态定位：static
相对定位：relative
绝对定位：absolute
固定定位：fixed

2.边偏移决定了该元素的最终位置

top:距离父元素上边线的距离
bottom:距离父元素下边线的距离
left:距离父元素左边线的距离
right:距离父元素右边线的距离

二、相对定位

1.它是相对于自己原来的位置移动
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待
一般给绝对定位当爹

三、绝对定位

1.以自己的祖先元素对齐，当没有祖先元素或祖先元素没有定位时，以浏览器对齐
2.当祖先元素有定位时，以最近一级有定位的父级元素为准
3.不再占有原先的定位

子绝父相:

1.子级绝对定位，不会占有位置，可放到父级任意位置，并且不影响其他兄弟盒子
2.父级需要加相对定位限制子级在父盒子内显示

四、固定定位

1.以浏览器的可视窗口作为参照移动定位，跟父元素没有关系，不随滚动条滚动
2.不再占有原先的定位，与绝对定位类似

小技巧：固定在版心右侧

先让固定定位的盒子left:50%,再margin-left: 版心宽度的一半

五、粘性定位sticky

1.以浏览器的可视窗口作为参照移动定位
2.占有原先位置
3.必须添加top,bottom,left.right其中一个才有效

六、定位叠放次序z-index

1.数值可以是正负或0,默认auto,数值越大，盒子越靠上
2.如果属性值相同，后来者居上
3.数字上面上面不能用单位
4.只有定位的盒子才有次序

七、拓展

1.绝对定位的盒子不能用margin: 0 auto水平居中

解决方法：left: 50%,margin-left: 向左（负号）移动盒子自身宽度一半
垂直居中原理相同

2.定位的特殊特性

行内元素加了绝对或固定定位后，可以直接设置高宽，块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小

3.浮动，绝对固定定位不会触发塌陷问题

4.浮动不会压住盒子，定位会压住

元素的显示与隐藏

一、display

1.display: none;隐藏元素，隐藏后不再占有原来位置（常用）
2.display: block;显示元素

二、visibility

1.visibility: visible;元素可视，继续占有原来位置
2.visibility: hidden;元素隐藏

三、overflow

1.overflow: hidden;将溢出的部分隐藏
2.overflow: visible;溢出的部分显示
3.overflow: auto;只有溢出的部分显示滚动条
4.overflow: scroll;溢出不溢出都显示滚动条