Make a fixed div the same width as parent div and it's padding

Question

I have a fixed div nested inside a parent div. I want the fixed nested div to be the width of the parent div with the padding. How can I go about this?

<div class="panel">
   <div class="fixed">
   </div>
</div>

And the CSS:

.panel {
   width: 100vw;
   height: 100vh;
   padding: 10px 60px 10px 10px;
}

.fixed {
   position: fixed;
   width: inherit;
}

Answer 1

First of all there are different between position fixed and absolute and the option you want is absolute with width in 100% like if want to setup nested div to be width as it's parent div also height then the nested div will be setup as position: absolute and here you can see in the given below example with colors of parent and nested div: Hope this is what you were looking for.... :)

 .panel { width: 100vw; height: 100vh; padding: 10px 60px 10px 10px; background: red; } .fixed { position: fixed; width: inherit; background: yellow; } 

 <div class="panel"> <div class="fixed"> </div> </div> 

Answer 2

What if not to state paddings for parent, but margins for nested div

.panel {
   width: 100vw;
   height: 100vh;
}

.fixed {
   position: fixed;
   width: calc(100vw - 70px);
   height: calc(100vh - 20px);
   margin:  10px 60px 10px 10px;
}

Answer 3

you are missing with few things:

.panel {
 width: 100vw;
 height: 100vh;
 padding: 10px 60px 10px 10px;
 position:relative;
 background:red;
 z-index:9;

}

.fixed {
 background:green;
 position: fixed;
 width:inherit;
 height:inherit;
 z-index:99;

}

its always a good practice to differentiate wrapper div and child div with z-index if you want them on top or behind of another, and in .fixed you were not giving height:inherit ( or how much you want)

https://jsfiddle.net/ishusupah/wmcw3w6o/1/