相对于父div外部的位置，没有滚动，但可感知

Question

编辑：

从本质上讲，我的问题似乎是希望把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>

Answer 1

坚持位置:相对；在父元素上设置子元素具有“位置:绝对；”。

确保父元素(或dom中较高的元素)没有与其关联的“溢出:auto”。

Answer 2

您应该在父div的样式中添加“溢出:可见”，沿着位置:相对。对于子div，您可以写位置:绝对值和定义位置

查一下这个

overflow:visible;

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