css - 如何设置Div(绝对)宽度100%

Question

当它的位置绝对时，我试图使一个框宽度为 100%？

下图是我想要做的

https://i.imgur.com/qMaT361.gif

<div class="box1">
 <div class="box2">
  float
 </div>
</div>

.box1 { position:relative; width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:absolute; top:10px; right:0; left:0; width:100%; height:50px; background:red; }

演示:https://jsfiddle.net/otkg9nfh/8/

请帮忙~

Answer 1

当一个 div 设置为绝对位置时，该 div 将采用父 div 设置的边界(相对位置)。如果您想使 div 100% 占据浏览器屏幕，则必须将 div 位置固定为 absolute

.box1 { position:relative; width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:fixed; top:10px; left:0; right:0; width:100%; height:50px; background:red; }

<div class="box1">
 <div class="box2">
  float
 </div>
</div>

.