Question

我对定位元素有一个令人讨厌的问题：| 所以我有一个孩子需要全屏宽度，而不是相对父母的。

＆＃13;

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

＆＃13;

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

＆＃13;

所以问题是如何将panel-body放在所有其他元素的前面并将宽度设置为100％但是100％来自屏幕而不是来自父亲相对。 The html structure cannot be modified.

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>

Answer 2

如果我理解问题......

如果所有父母，您将需要将所有父母offsetLeft和top 或简单设置位置的保证金左边和保证金最高值与负值之和定义为负数偏移和。

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

我找到了一些答案：

finding element's position relative to the document

现在您知道了自己的位置，并且很容易为元素位置类型绝对设置新位置。

你想要某种全屏。将x位置设为 - （sumOfOffsetLeft）也是为了。

对于宽度100％不需要计算，只需使用window.innerWidth即可 window.innerWidth / 100 * 95（屏幕的95％）。

Answer 3

我不确定您要做什么，但是如果在相对较小的父对象中有一个元素，则可以为孩子使用position:fixed，然后为其设置更大的宽度；因为一个具有位置：固定的元素；相对于视口定位。如果您想在一个位置内有一个全宽和全高的孩子，那就好了：相对双亲。祝您好运！

当相对父级具有较小宽度时，将绝对元素全宽设置为100％

3 个答案: