如何将内部容器移到外部容器之外？答案

【问题标题】：how to move an inside container beyond its outside container?如何将内部容器移到外部容器之外？
【发布时间】：2012-08-14 00:19:32
【问题描述】：

编辑 1

已使用 jsfiddle 链接进行了更新。 http://jsfiddle.net/DrFSV/

看到最后一行的波浪形图像了吗？我正试图在#outer_middle 之外采取行动。

建议？

这与原始链接有关。已删除网站的链接。

我有一个名为#outer_middle 的div 容器，在其中，我还有另外两个名为#middle 和#sidebar 的容器。

我正在尝试让#middle 内部的 div 稍微超出容器...

所以，我把位置：相对于#outer_middle，位置：绝对到#diy（带有黑色边框的那个）加上左：-90px；

（据我了解，如果您试图将内部容器移到其外部容器之外，则需要像这样放置相对和绝对定位）。

它影响侧边栏（粉红色列），位于#middle 下方，diy 图像位于左侧容器内部，而不是外部。

为什么？

如何让#diy 移到容器的左侧？

是否有可能这样做以使#diy 也保留在流程中？

请给点建议？如果我的问题不清楚，请告诉我。谢谢。

【问题讨论】：

标签： css

【解决方案1】：

将您的 #outer_top 和 #top 更改为以下代码。看看这是否是您想要实现的目标：

#outer_top {
  background-color: red;
  width: 1000px;
  margin: 0 auto;
}

#top {
  margin: 0 0 0 -90px;
  width: 500px;
  background-color: pink;
  height: 100px;
}

【讨论】：

嗯...我不想调整我的#outer_top 和#top。我正在尝试将#diy 移出容器#middle。
我知道，但我只是想看看这是否是您想要实现的目标。我试图改变你想要的，但似乎你的 CSS 有点乱..
嘿，禅，尝试了您对#top 的回答……它似乎有效。但是当我尝试申请#diy时，它仍然在容器内向左移动。您回答的好处是右侧边栏（粉红色的列）似乎已经回到了它的位置。嗯。
ok..那么现在尝试这样做 #outer_middle { width: 1000px;边距：0 自动；背景颜色：白色；位置：相对；高度：400px； } #outer_sidebar { 背景颜色：粉红色；高度：400px；宽度：300px；边距：0 0 0 -30px；然后尝试完全删除您的#middle div..看看是否可行。
zen，我查看了您的 css 代码...问题是#middle 保存了我的 4 个 div，包括 #diy。另外，它移动了侧边栏，这不是我在这里需要的。但非常感谢您提供帮助。

【解决方案2】：

如果我正确理解您的问题，您的 #diy 元素似乎已经在容器的左侧，正如您所说，它不是“外部”。

尝试调整#diy 元素的z-index CSS 属性。与具有较低 z-index 的元素相比，具有较大 z-index 的元素在页面上放置“更高”。为确保 #diy 位于顶部，请添加 99 的 z-index：

z-index: 99;

到 CSS。

【讨论】：

昨天已经试过了。没用。现在又做了一次，以防我错过了什么。查看链接，即使使用 z-index，您也可以看到，它仍然无法正常工作。（应该在我的原始帖子中提到这一点，抱歉）。
好吧，我会告诉你什么会有帮助。在 jsfiddle.net 上复制您问题的最简单版本，然后将其链接到此处，这样人们就可以自己弄乱代码并更好地理解您要实现的目标（也就是说，如果没有人可以提供答案在你沮丧到接受我的建议之前工作）。
链接真的那么复杂吗？我故意让它尽可能简单，因为我试图只处理 #diy 以移出其容器。
这并不是说它很复杂，只是jsfiddle允许人们自己弄乱你的CSS，而不是给你建议和等待你的反馈。这对我们来说要快得多，尽管对您来说有点痛苦。
已使用 jsfiddle 链接更新了我的帖子。你说得对，对别人来说更容易，尽管对我来说是一个巨大的痛苦！

【解决方案3】：

似乎您将#outer_middle 的溢出设置为可见（或者，只需将其删除），您就会得到您想要的结果。

【讨论】：

我放溢出是有原因的，诚然，我不记得了。想知道一旦它被删除它会如何影响它。（顺便说一句，它现在被删除了）。我认为这是因为我在#middle 内部的 div 上遇到了问题。