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

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

Answer 1

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

你可以 left: 20%;右:20%；顶部:20%； bottom: 20%; 或类似的，它会拉伸(stretch)以填满屏幕，在外面留下 20% 的空间......

如果你用 position:relative 设置父级然后

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

  margin: auto;
}

它只会拉伸(stretch)覆盖父元素