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

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

效果如下:
界面结构.png

界面结构.png

蓝色框部分(id设为tips)和main同属于container模块
html如下:
<div id="container">
<div id="main"></div>
<div id="tips"></div>
</div>
理想的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不会,就像隐藏了一样。具体原因还需待进一步分析。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 2,162评论 0 10
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 23,610评论 1 45
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,354评论 0 1
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 8,041评论 0 8
  • 品格的进阶1:简历美德与悼词美德 记得在武志红心理学课中提到过“自我一”和“自我二”与何帆老师讲的差不多何帆老师讲...
    微风知意阅读 186评论 2 3