javascript - 当相对父元素的宽度较小时，将绝对元素全宽设置为 100%

Question

我在定位元素方面遇到了一个棘手的问题:|所以我有一个 child 需要全屏宽度，而不是相对父级的宽度。

body{
  padding: 10px;
}
.container{
  position:relative;
  width: 400px;
  border: 1px solid red;
  padding: 15px;
}
.panel{
  position:relative;
  width:200px; 
  margin: 0 auto;
  height:40px;
}
.panel-body{
  position: absolute;
  width:100%;
}

<div class="container">
  <div class="panel panel-warning">
    <div class="panel-body">
      A Basic Panel
    </div>
  </div>
</div>

所以问题是如何将 panel-body 放在所有其他元素的前面，并将宽度设置为 100%，但 100% 来自屏幕而不是父级。 不能修改html结构。

fiddle:

Answer 1

这似乎有效，但我想我侥幸成功了。

body{
  padding: 10px;
}
.container{
  position:relative;
  width: 400px;
  border: 1px solid red;
  padding: 15px;
}
.panel{
  position:relative;
  width:200px; 
  margin: 0 auto;
  height:40px;
}
.panel-body{
  position: absolute;
  margin-left: calc(-50% - 20px - 15px);
  width:100vw;
  background-color: yellow;
}

<div class="container">
  <div class="panel panel-warning">
    <div class="panel-body">
      A Basic Panel
    </div>
  </div>
</div>