您的位置：首页 > 其它

div页面底部悬浮显示

2017-10-25 09:36 330 查看

为了完成页面底部显示公司和技术赞助的显示使得在页面滚动的时候左右两边的梯形阴影始终显示在底部

为了显示在页面底部首先想到的是footer来设置页面的页脚来显示页面底部的信息

<footer>
<p>Posted by: W3School</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

但是页脚显示不会始终显示在页面底部

所以采用设置底部div的postion

div各种postion设置的效果

postion：fixed //元素相对于浏览器窗口是固定的，可用于悬浮窗口

postion：relative //相对定位元素的定位是相对其正常位置。

postion: absolute //绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

所以设置div的postion为fixed bottom: 0px;即可保证div保留在底部

再设置完div始终在底部显示之后开始设置div的形状为梯形

这里使用边框画出梯形

width: 290px;
height: 0;
border-top: none;
border-bottom: 24px rgba(0, 0, 0, 0.7) solid;
border-left: transparent 30px solid;
border-right: none;

综合以上始终底部悬浮加上梯形显示最终的css样式为

#footRight {
width: 290px;
height: 0;
border-top: none;
border-bottom: 24px rgba(0, 0, 0, 0.7) solid;
border-left: transparent 30px solid;
border-right: none;
position: fixed;
bottom: 0px;
right: 0;
color: rgba(256, 256, 256, 0.5);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 梯形div 底部悬浮

相关文章推荐

新的分享

章节导航