fixed bar hide piece of my header

[mixafe]

hello all css trickers thanx in advance and hope to help

as title say i have appended top fixed bar writen by jquery and added before first element inside body tag

used jquery

$(document).ready(function () {
$(“body > :first-child”).before(”

<#div><#div #class=’skin’ >you’r welcome<#/div><#/div>

“);
}

used css

.skin{
padding: 20px 20px 20px 20px;
background:#000000;
width: 100%;
position: fixed;
z-index: 999;
box-shadow: 1px 2px 9px #2A5200;
border-top: 1px solid #90f128;
border-bottom: 1px solid #90f128;
}

now piece of header is hidden by that fixed bar
what’s problem ? is it because the bar loaded after document is ready $(document).ready();

or !!!

[Shikkediel]

Fixed position takes an element out of the page flow so your header is below it – try to give it some extra ‘top’ positioning, just as much as the fixed bar’s height. If it has static positioning, make it relative.

[Paulie_D]

Just giving the body enough padding-top (the same as height of the fixed element) to push down the content usually does the trick.

No need to get extra tricky with positioning.

[Shikkediel]

You are right there, I later realised (and wanted to add).

[Author]

Posts