重叠页面容器边框与浮动div边框

Question

我尝试在包含动态生成内容的页面中垂直浮动选项卡，并将页面内容容器的右边框与浮动div的左边框重叠。

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

在下面的小提琴中，我的页面是一个基本的骨架，是一个正在发生的事情的例子。

jsFiddle here

如果我在此类中添加position：absolute，浮动选项卡的位置正确，但页面将无法正确生长，因为内容将被附加，页脚也无法正确定位。另一方面，如果我移除绝对位置，则选项卡未正确定位。

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

如何将浮动标签与容器边框正确重叠？

注意：我无法更改页面结构（包装div和页脚），但如果需要，可以在#inner div之后附加浮动div。

Answer 1

这样的事情：

#inner
{
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    display: inline-block;
    width: 200px;
    position: relative; /* positoning context */
}

.floating-tab
{
    position: absolute;    
    border-left: 1px solid #fff;
    border-top: 1px solid lightblue;
    border-right: 1px solid lightblue;
    border-bottom: 1px solid lightblue;
    width: 32px;
    text-align: center;
    top: 10px;
    left:100%; /* fully left */
    margin-left: 1px; /* width of border */
    z-index:2;

}

＆＃13;

＆＃13;

$(function($) {
    var element = $(".floating-tab"), originalY = element.offset().top, topMargin = 10;
    $(window).on("scroll", function(event) {
		var scrollTop = $(this).scrollTop();
        element.stop(false, false).animate({ top: scrollTop < originalY ? topMargin : scrollTop - originalY + topMargin }, 300);
    });
    
    $("#B1").on("click", function() {
        $("#innercontent").append("<p>text 1</p><p>text 2</p><p>text 3</p><p>text 4</p><p>text 5</p><p>text 6</p><p>text 7</p><p>text 8</p><p>text 9</p><p>text 10</p>");
    });
});

＆＃13;

.floating-tab
{
    position: absolute;    
    border-left: 1px solid #fff;
    border-top: 1px solid lightblue;
    border-right: 1px solid lightblue;
    border-bottom: 1px solid lightblue;
    width: 32px;
    text-align: center;
    top: 10px;
    left:100%;
    margin-left: 1px;
    z-index:2;
    
}

.floating-tab span
{
    width: 24px;
    height: 24px;
    margin: 2px;
}

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

}

#inner
{
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    display: inline-block;
    width: 200px;
    position: relative;
}

#outer
{
    width: 100%;
    padding-top: 10px;
    display: block;
    text-align: center;
}

#footer
{
    margin-top: 17px;
    background-color: lightblue;
    border-top: 1px solid gray;
    height: 48px;
}

#pagewrapper
{
    min-height: 100%;
    margin-bottom: -66px;
}

html, body, form
{
    height:100%;
}

html
{
    overflow: initial !important;
}

*, *::after, *::before 
{
    padding: 0px;
    margin: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagewrapper">
    <div id="outer">
        <div id="inner">
            <div id="page-content">
                <input type="button" value="add content" id="B1" />
                <div id="innercontent"></div>
            </div>
            <div class="floating-tab">
                <span>A</span>
                <span>B</span>
                <span>C</span>
            <div>
        </div>
    </div>
</div>
<div id="footer">FOOTER</div>

＆＃13;

＆＃13;

＆＃13;