How do I get a div to appear outside it's container, and scroll, while keeping overflow on it's container

Question

I'm working on a Wordpress blog design, and running into an issue with the entry-header. I would like my entry-header to be offset, going outside the bounds of it's container, yet scrolling with the content, inside the content wrap. Here is a screenshot of what i'm trying to achieve. ]1

I'd like to have the red areas scroll along with the text of the blog post, but so far, the only way I've been able to get the red areas to be offset as seen above, is to set position: absolute. When position is set to relative, it shows up as seen below.

Do you have any ideas that could help me resolve this issue?

Thanks.

Answer 1

As user @divy3993 states a fiddle would be helpful.

Anyway: The overflow of your outer div seems to be hidden. This is the reason why you don't see the left part of your header when position is relative.

Apply the css-property

overflow-x: visible;

to your outer div (the one with the dark background) and the full header should be shown.

EDIT:

Sorry for keep you waiting.. I had a while no look at SO. Sadly the solution that i was thinking of (with pure CSS) does not work as it is pointed out in https://stackoverflow.com/a/6433475/1402667 the combination of

overflow-x: visible

and

overflow-y: auto

won't work as expected.

So it seems you have to use JavaScript to solve your issue. I had a look at the link that you are pointing out in comments (http://basil-gen.marathonwp.com/blog/) and successfully run the following jQuery code there:

var $headers = $('.site-inner h1');
var $scrollContainer = $('.site-inner .content-sidebar-wrap');

var hideShowHeaders = function(visibleTop, visibleBottom){
    $headers.each(function(){
        if($(this).show().offset().top < visibleTop || $(this).offset().top + $(this).outerHeight() > visibleBottom){
            $(this).hide();
        }else{
            $(this).show();
        }
    });
};

$headers.each(function(){
    $(this).data('initTop', $(this).position().top);
});

hideShowHeaders($scrollContainer.offset().top,  $scrollContainer.offset().top + $scrollContainer.height()); //might consider borders

$scrollContainer.scroll(function(){
    $headers.each(function(){
        $(this).css('top', $(this).data('initTop') -  $scrollContainer.scrollTop() );
    });
    hideShowHeaders($scrollContainer.offset().top,  $scrollContainer.offset().top + $scrollContainer.height()); //might consider borders
});

It essentially repositions the headers whenever your content container is scrolled. When the headers (or a part of those) would not be visible with position:relative those headers are hidden. In all other cases they are shown.

As i mentioned it's jQuery-Code so you need to include jQuery yet and e.g. execute above code inside

$(document).ready(function(){
   ...code above
});

If you want to straight test it you can browse to your site (http://basil-gen.marathonwp.com/blog/) open Javascript-Console, inject jQuery via javascript e.g. like

var script = document.createElement('script');
script.src = "http://code.jquery.com/jquery-latest.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

and then execute above code in Javascript-Console (when directly testing it you should not have scrolled before executing javascript code).

---

I should mention that the code above is not perfect since it only shows and hides headers instead of showing e.g. 50% of it. I couldn't come up quickly with a solution for it. Anyway you could do this with a more complex showHideHeaders-function where marked lines need to be implemented

var hideShowHeaders = function(visibleTop, visibleBottom){
    $headers.each(function(){
        if($(this).show().offset().top + $(this).outerHeight() < visibleTop){
            if($(this).offset().top  < visibleTop){
                $(this).hide();
            }else{
                //lower part of this header needs to be displayed
                var bottomPxToShow = $(this).offset().top + $(this).outerHeight() - visibleTop;
                var hiddenPx = $(this).outerHeight() - bottomPxToShow;
                //show lower bottomPxToShow Pxs of header
            }
        }else if($(this).offset().top + $(this).outerHeight() > visibleBottom){
            if($(this).offset().top > visibleBottom){
                $(this).hide();
            }else{
                //upper part of this header needs to be displayed
            }
        }else{
            //show full header
        }
    });
};

I hope that helps you!

Answer 2

give it position relative with higher z-index

position:relative;
z-index:10;
left:-50px;

JSFiddle