父 div 的边界阻塞子 div答案

【问题标题】：parent div's border blocking child div父 div 的边界阻塞子 div
【发布时间】：2011-05-01 00:34:34
【问题描述】：

我有一个父 div 和一个子 div。父 div 有一个边框宽度属性，但不幸的是，边框宽度阻止了子 div 的一部分显示。不能更改父 div 的border-width 属性。如何让子 div 显示在父 div 的边框上方？

要注意，父div应用了position: absolute，子div在CSS中没有应用position，只有子div的左右边缘没有显示，因为只有border-left和border - 设置父 div 的右侧。

【问题讨论】：

标签： css border

【解决方案1】：

查看示例：http://jsfiddle.net/LGR8w/

定位元素后，您可以让子 div 与父级的边框重叠，而不是简单地扩展父级以适应内容。（尽管你为什么要这样做超出了我的理解）。

编辑：

如果我错了，您能否向我解释一下为什么要使子内容和父内容重叠，而不是简单地使父内容扩展以适合孩子？除非这是为了风格重叠设计，否则我不明白为什么这是必要的。

【讨论】：

父 div 必须保持其当前大小。它无法展开。
如果它不能在高度上扩展，则必须将子元素从文档流中取出，以便与父文档重叠。使用 position:absolute 为孩子，并调整它/左上或右下。
这就是我想做的事情。看起来它更容易定位：绝对的孩子。感谢您的帮助。
@Moses 我刚刚找到了您的答案并尝试自己使用它，但是，我无法让元素正确重叠。你能解释一下如何确保孩子与父边框重叠而不是相反吗？我试过玩 z-index 并没有成功
@kat 正如您从示例小提琴中看到的那样，如果父母和孩子都有position:relative（或绝对），那么您不需要z-index，孩子将正确地与父母重叠边境。这是我能提供的尽可能多的帮助。如果您仍然有问题，我建议创建一个新问题，链接到此问题/答案，并解释为什么您的情况与答案不起作用的不同。