固定divを親divと同じ幅にして埋め込みます

Question

私は固定divを親divの中に入れています。私は固定された入れ子になったdivを、パディング付きの親divの幅にしたい。これについてどうすればいいですか？

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

とCSS：すべての

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

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

Answer 1

ものではありませんあなたはいくつかのことに欠けている

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

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

Answer 2

まずそこに固定され、絶対位置の間で異なっていて、あることをセットアップネストされたdiv要素にする場合のように必要なオプションは、100％の幅を持つ絶対的です親divの高さと同じ高さであるため、入れ子divはposition：absoluteとして設定されます。ここでは、parentとnested divの色を使って下の例を見ることができます：これはあなたが探していたものです。

.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 3

ネストされたdivのための状態の親のためのパディングが、余白の場合：

.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; 

}

その常にあなたが別のものの上または後ろにそれらを望むならば、z-indexでラッパーdivと子divを区別するための良い習慣は、 、あなたが高さを与えていなかった.fixed中：継承（またはどのくらいあなたが欲しい）

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