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

【问题标题】：CSS move relative positioning div to outside the overflow hidden divCSS将相对定位div移到溢出隐藏div之外
【发布时间】：2017-05-19 04:39:19
【问题描述】：

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

https://jsfiddle.net/bigboytr/zssub946/

重要提示：如果我更改了父 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>

【问题讨论】：

欢迎来到 StackOverflow，您的问题应该包含 Minimal, Complete and Verifiable Example。你的代码在哪里？（提示：它应该在您的帖子中，而不是在场外。）
对不起我的错误。我改变我的职位。我希望这没问题。
更好，尽管我在其中放置了一个更有用的 Stack Snippet。顺便说一句，div 不像 input 或 img 那样自动关闭，它需要一个结束标记。
是的，我知道 div 不会自动关闭。我只是快速打字。已编辑。

标签： css overflow css-position

【解决方案1】：

将 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>

【讨论】：

【解决方案2】：

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

【讨论】：

标记在哪里？您正在使用 Stack Snippet，可能会一直使用。
你的建议不是我想要的。现在绿色框会覆盖其他框。
抱歉，您想把它放在描述的顶部——您想要它在红色的右上角吗？...您最终得到了吗？