css之定位

在css样式中position有很重要的作用，应用于前端的页面布局。
一、position有四种属性
1.visible
默认属性
2.relative
相对定位，元素会相对于原来的位置的左上角进行位置偏移，相对定位是占有之前的位置空间的
3.absolute
绝对定位，绝对定位的元素相对于它最近的已有定位的父级及以上元素进行位置偏移，如果没有已经有定位的父级相对于最初的body进行位置偏移，元素不会占有之前的位置
4.fixed
固定定位将元素固定在页面的某个地方，不会随着滚动条变化而发生变化脱离了文档流，是随着页面的body标签的左顶点进行位置偏移的。
二、position属性的应用
1、利用绝对定位的属性，可以隐藏元素，使元素跳出页面空间，达到隐藏元素的效果，由于他没有占据页面空间，所以其使用不影响整体布局。
代码如下：

2、position：absolute和display：none联用，可以实现第二菜单或者说是弹出框。
代码如下：
css部分：
在父元素里设两个子元素，使他们并列，设置 父元素的相对定位，其中一个子元素设置绝对定位，它的方位属性值可以决定他长护险的方位，并使用display：none，隐藏此子元素，在父元素上设置hover的点击效果，里面设置display：block，当点击另一个子元素时，此元素会显现出来。

html部分：

3、position：fixed的属性通常使用在一些页面右面的咨询栏，
其使用一般都会和弹出框一起出现，不会随滚动条一起移动，可以是一些重要对的信息不至于重头找起，提升了用户体验。