CSS 将相对定位 div 移动到溢出隐藏之外 div

Question

我必须移动 div 以溢出隐藏的父级 div。我在页面上使用了一些插件。所以我无法更改 divs 的顺序。我想将绿色框移到蓝色和红色框上。我希望有一个解决方案。

重要说明：如果我更改父 div 的位置属性，插件将无法正常工作。

#box1 {
  position: absolute;
  background: red;
  padding: 5px;
  width: 150px;
  height: 150px;
}

#box2 {
  position: absolute;
  overflow: hidden;
  background: blue;
  width: 100px;
  height: 100px;
}

#box3 {
  position: relative;
  background: green;
  width: 50px;
  height: 50px;
  top: -10px;
}

<div id="box1">
  <div id="box2">
    <div id="box3"></div>
  </div>
</div>

Answer 1

#box1 { position: absolute; background: red; padding: 5px; width: 150px; height: 150px; }
#box2 { position: absolute; overflow: hidden; background: blue;  width: 100px; height: 100px; }
#box3 { position: relative; background: green; width: 50px; height: 50px; top: -10px; }

#box3 {
      /* left 150px (box1) - box3 width 50px = 100px */
      z-index: 2; padding: 0; top: -5px; left: 100px }
#box2 { overflow: visible }

<br/><br/><br/>
<div id="box1">
  <div id="box2">
    <div id="box3"/>
  </div>
</div>

见http://jsfiddle.net/xmct0wot/

需要对 box2 和 box3 进行更改：

#box3 { width: 160px; height: 160px;
      /* 160px because width, height = 150px plus 5px + 5px padding */
      z-index: 2; padding: 0; top: -5px; left: -5px }
#box2 { overflow: visible }

Answer 2

将 box2 溢出属性移动到 box1。
给 box1 填充。
给box3负值弹出

#box1 {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
  padding: 5px;
  overflow: hidden;
}

#box2 {
  position: absolute;
  background: blue;
  width: 100px;
  height: 100px;
}

#box3 {
  position: absolute;
  background: green;
  width: 50px;
  height: 50px;
  top: -5px;
  right: 0;
}

<div id="box1">
  <div id="box2">
    <div id="box3"></div>
  </div>
</div>

CSS 将相对定位 div 移动到溢出隐藏之外 div

CSS move relative positioning div to outside the overflow hidden div

css

css-position

overflow