css - 内部要素によってサイズ変更可能な固定要素

Question

私はcssでこのコードを持っています：

div#show{
background-color:black;
position: fixed;
width:100px;
height:100px;
left: 0;
right: 0;
top: 0;
bottom: 0;

margin: auto;
}

私のページの中央に黒いボックスが表示されます。ただし、一定でないサイズにしたい。

div#show{
background-color:black;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;

margin: auto;
}

しかし、この状況では、ページ全体をカバーしています。内部要素をカバーするために必要なだけ大きくする解決策はありますか?

score 0 · Accepted Answer

usingposition: fixed;は、要素がその親を無視し、ウィンドウに収まるようにします。

あなたはちょうどleft: 20%; right: 20%; top: 20%; bottom: 20%;または同様のことができ、画面全体に伸びて外側に20％残ります…</p>

親を次のように設定するposition:relativeと、

div#show{
  background-color:black;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  margin: auto;
}

親要素を覆うように伸びるだけです

1 に答える 1