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

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

它只会伸展以覆盖父元素