与浮动 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

试试这个FIDDLE

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

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

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

Answer 2

类似这样的：

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

}

$(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>");
    });
});

.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;
}

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