How to set the Div(absolute) width 100% - css

Question

I'm trying to make a box width 100% when its position absolute ?
This below image is what I am trying to make
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; }
Demo : https://jsfiddle.net/otkg9nfh/8/
Please help~

Answer 1

When a div is set to absolute position the div takes the boundry set by the parent div (relative position). If you wan to make the div 100% of the browser screen you will have to make the div position fixed insted of 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>
.

Answer 2

you can use viewport width width:100vw
.box1 { position:relative; width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:relative; width: 100vw; height:50px; background:red; }
<div class="box1">
<div class="box2">
float
</div>
</div>

Answer 3

.box{position: relative;}
.box1 { width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:absolute; top:10px; left:35.55%; right:0; width:100%; height:50px; background:red;}
<div class="box">
<div class="box1">
<div class="box2">
float
</div>
</div>
</div>
If you want div to start from left with some space using absolute then do like this.

Answer 4

You can do it 2 way
One is by using position: fixed. But you will lost the relative positioning based it's parent. Because when you apply fixed it goes out regular document flow and it consider the body it's parent.
Another way by using calc() if you want to keep the position; absolute.
.box2 { position:absolute; top:10px; right:0; left:calc(250px - 50vw); width:100vw; height:50px; background:red;}
Here left:calc(250px - 50vw); used to make center the element. 250px half size of parent container and 50vw is ensure half size of window vertical width.

Answer 5

It's still not clear from your question what you want the element to be "100%" of, but assuming it's the parent of the parent (the document body in this case), you can simply remove position:relative; from .box1.
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning
An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor to which the element is relatively positioned.) If the element has margins, they are added to the offset.
.box1 {
width: 500px;
height: 100px;
margin: 0 auto;
overflow: visible;
background: #f1f1f1;
}
.box2 {
position: absolute;
top: 10px;
left: 0;
right: 0;
width: 100%;
height: 50px;
background: red;
}
<div class="box1">
<div class="box2">
float
</div>
</div>
As Shahil M suggested, you can also remove box2 from inside of box1. Ultimately you need to either change your markup or you css. As is often the case when things don't behave, you might want to re-examine why you've structured things like this to begin. Typically when you apply absolute positioning you are expecting the parent to act as the containing block.