web布局 absolute布局

来源：互联网发布：lazada卖家数据分析编辑：程序博客网时间：2024/04/28 00:20

布局啦 ##今天学到一种新的布局方法，用absolute绝对定位布局！

相信之前的各位同学在做网站的顶部底部不移动时，都会采用position：fixed的方法来相对浏览器定位，但是，这种方法总是会出现各种各样的问题。所以，下面我来教大家的这种方法大家尽可以去愉快的使用哈哈哈哈。来上代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>布局</title></head><style>    .content{        position: absolute;        top:48px;        bottom:52px;        left:0;        right:0;        overflow: auto;        overflow-y: hidden;    }    .overlay{        position: absolute;        top:0;        right:0;        bottom:0;        left:0;        background-color: #5cb85c;        z-index: 9;    }    header{        height: 48px;        top:0;        left:0;        right: 0;        position: absolute;        background-color: #2b2b2b;    }    footer{        bottom: 0px;        height: 52px;        left:0;        right: 0;        position: absolute;        background-color: #2e6da4;    }</style><body><header>absolute布局</header><div class="content"><div style="height: 1000px;font-size: 200px;background-color: #003eff"></div></div><!--<div class="overlay" style="opacity: 0.5"></div>--><footer></footer></body></html>

大家只用创建一个html，然后把代码复制粘贴即可使用。

下面我们开始分步讲解：
首先是首部和尾部的定位，看代码

header{        height: 48px;        top:0;        left:0;        right: 0;        position: absolute;        background-color: #2b2b2b;    }    footer{        bottom: 0px;        height: 52px;        left:0;        right: 0;        position: absolute;        background-color: #2e6da4;    }

没错，就是像代码所示的，我们将top，right，left都设置为0，即可拉伸，替代了width＝100％的方法，然后给予一个height，即可实现上方fixed效果，footer同理，将top改为bottom即可。

那么我们开始想了，上方下方固定了，那中间的内容怎么办呢，其实实现的方法很简答！我们同样采用absolute的定位，然后将top和bottom分别设置成header和footer的height，left和right都设置为0，最后一个最关键的就是！ overflow设置为auto！哈哈，这样就大功告成了，这是一个类似nativeapp界面的布局，header作为navigation，footer作为tabbar来做，不过细心的朋友可能发现，那右边overflow有滚动条啊！呵呵，hidden一下啊。

0 0