具有浮动div边框的重叠页面容器边框

Question

I'm trying to make a tab float vertically in a page with dynamic generated content and overlap the right border the page content container with the left border of the floating div.

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

In the following fiddle there's a basic skeleton of my page and an example of what is happening.

jsFiddle here

If I add position: absolute to this class the floating tab is correctly positioned but the page will not grow correctly as the content is appended nor will the footer be correctly positioned. On the other hand, if I remove the position absolute then the tab is not correctly positioned.

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

How can I place the floating tab correctly overlapping the container border?

Notes: I cannot change much of the page structure (wrapping div and footer) but if needs be, the floating div can be appended after the #inner div.

Answer 1

Try this FIDDLE

Just add this rules to your .floating-tab :

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

and float: left to your selector #page-content

Answer 2

Something like this:

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