2018-06-30在angular布局中使用fixed和absolute的问题

angular项目大致布局如下，侧边栏是固定模板，中间的main是路由的部分。目前我的需求是在main界面下边设置一个面板由按钮控制弹出回缩。

界面结构.png

效果如下：

界面结构.png

界面结构.png

蓝色框部分（id设为tips）和main同属于container模块
html如下:

理想的css如下：
变化前：

tips{

height: 200px;
width: 1920px;
z-index: 1;
position: absolute;
left: 0px; //距离左侧0px;
bottom: -200px; //距离底部-200px;
border:1px lightblue solid;
}
通过变化后的css为:

tips{

height: 200px;
width: 1920px;
z-index: 1;
position: absolute;
left: 0px; //距离左侧0px;
bottom: 0px; //距离底部0px;
border:1px lightblue solid;
}
然鹅。。结果是是这样：点击事件可以操作tips从main面板下方滑到如图二所示，但是，点击事件之前可以拖动滚轮看到tips界面，如图二，但是我们期望的是图一那样，没有点击按钮之前是看不到tips界面的

将abusolute改为fixed之后结果达到预期效果。

但是问题又出现了，fixed是以整个窗口为父元素的，tips被侧边栏遮住了一部分，而右边空了一部分。那么还要调整一下css如下：

tips{

height: 200px;
width: 1920px;
z-index: 1;
position: absolute;
left: 60px; //设置距离左侧60px;
bottom: 0px; //距离底部0px;
border:1px lightblue solid;
}

界面结构.png

总结经验:

• 原来在组件中，使用absolute的话，相对html定位，或者相对父元素非“position：static”的元素定位。那么本次例子的父元素以id为container的整体，所以left：0就可以了。
  而如果，我们用另一个参数fixed。fixed属性， 固定定位，对象脱离正常文档流，相对于父元素的定位，父元素一般为窗口，需要配合top,left,right,bottom,z-index等属性(IE6不支持)。这里是以整个html为父元素，即窗体，故需设置left：60px。
• 设置为absolute，main底部的元素可以会使得产生滚动条，而fixed不会，就像隐藏了一样。具体原因还需待进一步分析。