Question

我有这种情况，我有如下结构

.red{
   height:200px;
   width:200px;
   overflow: hidden;
   position:relative;
   background:red;
 }

.orange{
   right: -50px;
   top: 50px;
   height:100px;
   width:100px; 
   position:absolute;
   background:orange;
 }

和css如下

.orange

我面临的问题是我需要.red div完全展示，但由于.orange div上的溢出而部分显示。我知道我可以删除溢出，它会工作，但溢出是我需要的另一个功能，我无法删除它。有没有什么方法可以让attr div完全可见而不从父div中删除溢出？

这是fiddle。

Answer 1

突破溢出：隐藏

＆＃xA;＆ #xA;

＆＃XA;
基本上，为了使绝对定位的元素出现＆＃xA;溢出元素之外：隐藏，最接近定位＆＃xA;祖先也必须是溢出元素的祖先：＆＃xA;隐藏。
＆＃xA;

＆＃xA;＆＃xA;

（编辑）通过省略父代的位置：relative ，橙色框将是绝对相对于＆lt; body＆gt; 定位，然后可以使用某个脚本重新定位:(或只是手动定位）

＆＃xA;＆＃xA;

  CSS：＆＃XA;红色{＆＃XA;高度：200像素;＆＃XA;宽度：200像素;＆＃XA;溢出：隐藏;＆＃xA;背景：红色;＆＃XA; }＆＃XA;＆＃XA; //脚本＆＃XA; var parent = $（'。red'）;＆＃xA; var inner = $（'。orange'）;＆＃xA; inner.css（{＆＃xA; left：parent.outerWidth（） -  inner.outerWidth（）/ 2＆＃xA;

＆＃xA;＆＃xA;

请看这里的小提琴

＆＃xA;

Answer 2

尝试将隐藏的溢出添加到伪元素，并将其从.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;
}

https://jsfiddle.net/Smartik/rmx1g66z/6/

Answer 3

丑陋的解决方案

HTML

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

CSS

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

Answer 4

如果没有任何影响其他事情的溢出问题的上下文，您可以使用特定的overflow-x和overflow-y属性吗？

即

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

Answer 5

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

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

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

溢出隐藏的相对div内的绝对div

5 个答案: