html5中absolute,如何理解这段代码中absolute对<div>百分百宽度的影响？

在.container中添加position: relative;之后

在.container中删除position: relative;之后

Document

*{margin: 0px;

padding: 0px;}

html,body {

height: 100%;

background-color: #00FFFF;

}

.header{background-color: #000;

width: 100%;

height: 100px;

}

.header ul {

float: right;

display: inline-block;

line-height: 100px;

color: #fff;

font-size: 20px;

margin: 0;

}

.header ul li{display: inline-block;

margin: 0 20px;}

.container{

position: relative;

margin: 0 auto;

background-color: #FFF;

height: 100%;

width:80%;

padding-top: 500px;

}

.a{height: 200px;width:50%;

background-color: yellow;

position: absolute;

}

.b{height: 200px;width:50%;

background-color: red;

position: absolute;

right: 0;}

.foot{

position: relative;

background-color: #000;

bottom: 0px;

height: 100px;

width: 100%}

.foot ul{color: #fff;

display: block;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

}

.foot ul li{

display: inline-block;

}

• 牛逼
• 牛逼
• 牛逼
• 牛逼牛逼
• 牛逼

• 牛逼
• 牛逼
• 牛逼
• 牛逼牛逼
• 牛逼