html - Links and Z-Index -
I am having a problem with a scroll effect where I can not get the link to work within the header Because the Edit Sorry, I was not quite clear, the links in the header area (green) are not active because the zayed index properties are to give heading area a negative index The link is not active, so I was thinking of a fix for this HTML: and CSS: Since there is no link in the code provided by you If there is a link in the "HeaderBoard" dev if it is the case, then you are not able to click on them because they will appear under the "navBar" div due to the styles provided by you. If this is the effect you have, specify the margarine or padding for "headerbar" div, which will allow you to push the link given below "navbar". z -index should be negative for the effect, the links are in the header.
& lt; Body & gt; & Lt; Div id = "container" & gt; & Lt; Div id = "navBar" & gt; & Lt; / Div & gt; & Lt; Div id = "headerBar" & gt; & Lt; / Div & gt; & Lt; Div id = "main content" & gt; & Lt; H1 & gt; This is the main content & lt; / H1> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt;
#navbar {status: fixed; Top: 0; Left: 0; Width: 100%; Z-index: 1000; -MOZ-BOX-SHADOW: 0 0 5px # 000000; -WebKit box-shadow: 0 0 5px # 000000; Box-Shadow: 0 0 5px # 000000; Background: Red; Height: 50px; } #headerBar {top: 0; Height: 250px; Left: 0; Correct: 0; Margin: 0 px auto; Width: 100%; Status: fixed; Z-index: -1000; Background: green; } #mainContent {Overflow: Auto; Z-index: 0; Margin-top: 250px; Width: 100%; Height: 900px; } Body, # container {background: yellow; }
Comments
Post a Comment