javascript - 重叠页面容器边框与 float div 边框

Question

我正在尝试使一个选项卡在具有动态生成内容的页面中垂直 float ，并将页面内容容器的右边框与 float div 的左边框重叠。

Here is a representation of what I'm trying to achieve :

在下面的 fiddle 中，有我的页面的基本框架和正在发生的事情的示例。

jsFiddle here

如果我将 position: absolute 添加到此类，则 float 选项卡的位置正确，但页面不会随着内容的附加而正确增长，页脚也不会正确定位。另一方面，如果我删除绝对位置，则选项卡的位置不正确。

#page-content
{
    border: 1px solid lightblue;
    display: inline-block;
    width: 180px;
    padding: 10px;
    min-height: 100px;
    /*position: absolute;*/
}

如何将 float 标签正确放置在容器边框上？

注意:我无法更改大部分页面结构(包装 div 和页脚)，但如果需要，可以在 #inner div 之后附加 float div。

Answer 1

试试这个 FIDDLE

只需将此规则添加到您的.floating-tab:

margin-left: -1px;
z-index: 999;
float: left;

和float: left到你的选择器#page-content