Html 溢出隐藏相对div中的绝对div

在这种情况下，我的结构如下所示

<div class="red">
   <div class="orange"></div>
</div>

我面临的问题是，我需要

.orange

div完全显示，但它部分显示是因为

.red

div上的溢出。我知道我可以删除溢出，它会工作，但溢出是用于我需要的另一个功能，我无法删除它。是否有任何方法可以使

.orange

div完全可见，而不删除父div中的溢出

这是一本书

一个丑陋的解决方案

HTML

---

如果溢出问题的上下文不影响其他内容，您可以使用特定的overflow-x和overflow-y属性吗

i、 e

---

尝试下面的代码，它可能会帮助你

.red{
高度：200px；
宽度：200px；
溢出：隐藏；
位置：相对位置；
背景：红色；
}
.橙色{
右：0px；
顶部：0px；
身高：100%；
宽度：100%；
位置：绝对位置；
背景：橙色；
}

基本上，为了使绝对定位的元素出现 溢出元素的外部：隐藏，其最近位置 祖先还必须是具有溢出的元素的祖先： 隐藏的

（编辑）通过省略父项中的

位置：相对

，橙色框将绝对相对于

定位，然后可以使用一些脚本重新定位：（或仅手动定位）

---

尝试将溢出隐藏添加到伪元素，并将其从

.red

选择器中删除。我认为应该这样做：

.red{
  height:200px;
  width:200px;
  position:relative;
  background:red;
}
.red:before,
.red:after{
    overflow: hidden;
}
.orange{
  right: -50px;
  top: 50px;
  height:100px;
  width:100px; 
  position:absolute;
  background:orange;
}

---

将其更改为滚动怎么样？@Janleyu，这将破坏滚动功能。它必须保持隐藏。那你为什么要显示

.orange

？这是可行的，但我想这不是你需要的…；）->这是一个绝妙的想法，但不幸的是它涉及到更改html结构。修复了，这里不需要包装器。请将答案回滚到使用包装器的版本，好吗？我想我可以用这个。这很整洁。但是显然，

.red

本身仍然需要

溢出：隐藏的
存在。它尝试了，但仍然破坏了主容器的滚动功能。然后我认为您唯一的选择是javascript。
<div class="container">
    <div class="red"></div>
    <div class="orange"></div>
</div>

    .container{
        height: 200px;
        width: 200px;
        position: relative;
    }
    .red {
        height: 200px;
        width: 200px;
        overflow: hidden;
        position: relative;
        background: red;
    }
    .orange {
        right: -50px;
        top: 50px;
        height: 100px;
        width: 100px;
        position: absolute;
        background: orange;
    }

.red {
  overflow-x: auto;
  overflow-y: hidden;
}

css:
    red{
      height:200px;
      width:200px;
      overflow: hidden;
      background:red;
    }

//script
       var parent = $('.red');
       var inner = $('.orange');
       inner.css({
          left:parent.outerWidth()-inner.outerWidth()/2

.red{
  height:200px;
  width:200px;
  position:relative;
  background:red;
}
.red:before,
.red:after{
    overflow: hidden;
}
.orange{
  right: -50px;
  top: 50px;
  height:100px;
  width:100px; 
  position:absolute;
  background:orange;
}