相对于父 div 之外的位置，无滚动但可见答案

【问题标题】：position relative outside of parent div, no scroll but visisble相对于父 div 之外的位置，无滚动但可见
【发布时间】：2017-04-05 00:15:35
【问题描述】：

编辑：

本质上我的问题似乎是希望将overflow-y:hidden; 与overflow-x:visisble; 结合起来。这似乎违背了规范。如果有人知道解决方法，请务必告诉我:)！

当我尝试使用 position: absolute; 或 position: relative; 将 div 定位在其父 div 之外的位置时，父 div 会获得一个滚动条。

我不想要滚动条。但很明显，当我使用overflow: hidden; 时，位于父级之外的子 div 位会被截断。

如何使父级之外的位可见，而不出现滚动条？

编辑：

忘了说。外部 div 需要有overflow-y:hidden;

编辑添加 JSFIDDLE：

https://jsfiddle.net/Lhhxdz9n/4/

<div style="
position:relative;
width:500px;
height:300px;
background-color:green;
overflow-y:hidden;
">
  <div style="
  width:50%;
  margin-left:50%;
  height:50%;
  position:relative;
  overflow:visible;
  background-color:red;
  ">

    <div style="
    background-color:blue;
    position: absolute;
    top: 50%;
    height: 20px;
    transform: translateY(-50%);
     width: 10px;
    right: -5px;
    ">

    </div>
  </div>
</div>

【问题讨论】：

你不需要一个额外的包装器来不与overflow-y和那个外来者交互吗？ jsfiddle.net/Lhhxdz9n/11

标签： javascript html css css-position

【解决方案1】：

棍子位置：相对；在将子元素设置为“位置：绝对；”之前在父元素上。

确保父元素（或 dom 中任何更高的元素）没有“overflow: auto;”与之相关的

【讨论】：

【解决方案2】：

您应该将“溢出：可见”添加到父 div 的样式中，沿位置：相对。对于子 div，您可以编写 position:absolute 并定义位置

检查一下

overflow:visible;

https://jsfiddle.net/Lhhxdz9n/5/

【讨论】：

你需要申请overflow:visible to both parents
您需要调整第二个父级的边距或宽度以获得您想要的。 jsfiddle.net/Lhhxdz9n/6
我需要在容器 div 上为我的应用程序隐藏 overflow-y。 jsfiddle.net/Lhhxdz9n/9
我需要它看起来像在 jsfiddle.net/Lhhxdz9n/5 上的样子。但是在最外面的 div 上有overflow-y:hidden;。
然后使用 Jquery。 appendTo() 函数适合您的要求。将孩子附加到最高父级。