内部元素可调整大小的固定元素

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

但是在这种情况下，它会覆盖整个页面。是否有解决方案，以使其足够大以覆盖内部元素？

Answer 1

使用position: fixed;使元素忽略其父元素并适合窗口。

您可以只输入left: 20%; right: 20%; top: 20%; bottom: 20%;或类似值，它会拉伸以填满整个屏幕，使屏幕周围剩下20％...

如果将父级设置为position:relative，然后

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

  margin: auto;
}

只会覆盖父元素