Question

#container {
  width: 200px;
  height: 200px;
  background:red;
  overflow: auto;
  position: relative;
}

#absolute {
  position: absolute;
  top: 50px;
  left: 0;
  width: 400px;
  height: 20px;
  background: yellow;
}

<header>Header</header>
<div id="container">
  <div id="absolute"></div>
</div>
<footer>Footer</footer>

我在这里有一个绝对定位的黄色条，比父框宽。我希望整个条形图可见，而不是被父级尺寸剪裁。是否可以使用CSS属性的某种组合来做到这一点？

我知道从父项中删除overflow：auto会产生我要求的效果，但不幸的是，删除它不是一种选择。

Answer 1

我添加了另一个包含overflow: auto;的包装器并将其从主容器中删除

#container {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
}

.subcon {
  overflow: auto;
}

#absolute {
  position: absolute;
  top: 50px;
  left: 0;
  width: 400px;
  height: 20px;
  background: yellow;
}

<header>Header</header>
<div id="container">
  <div class="subcon">
    <div id="absolute"></div>
  </div>
</div>
<footer>Footer</footer>

Answer 2

<p>Fruits:</p>
<div id="arrayDiv"></div>
<hr>
<input id="banana" type="button" value="Banana" onclick="addItem('Banana', 'banana')">
<input id="melon" type="button" value="Melon" onclick="addItem('Melon', 'melon')">
<input id="pineapple" type="button" value="Pineapple" onclick="addItem('Pineapple', 'pineapple')">
<input id="coconut" type="button" value="Coconut" onclick="addItem('Coconut', 'coconut')">

如何获取位置：当父溢出为auto时，绝对子溢出父维度？

2 个答案: