Question

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

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

#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

将box2 overflow属性移至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>

Answer 2

＆＃13;

#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 }

＆＃13;

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

＆＃13;

请参阅http://jsfiddle.net/xmct0wot/

box2和box3需要进行更改：

＆＃13;

#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 }

＆＃13;

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

2 个答案: