Please have a look at this webpage - http://dev.topyaps.com/how-awesome-are-you
This post is built by a wordpress plugin that I developed. I am facing various issues because of the z index property of elements. The issues are -
1) On scroll the menu merges with the floating bar on the page. CSS of menu -
kodda_container {
z-index: 999 !important;
width: 1220px;
height: 40px !important;
background-color: ;
border-top: solid transparent;
border-right: solid transparent;
border-bottom: solid transparent;
border-left: solid transparent;
background-image: -webkit-linear-gradient(top, transparent, transparent);
}
Css of floating bar -
.scoreBox {
background: #fafafa;
border: 1px solid #d1d1d1;
width: 100%;
z-index: 997;
}
2) On clicking the submit button a center box appears. The center box has to be on the top while it hides.
Css of center box -
element.style {
padding: 6px;
word-wrap: break-word;
position: fixed;
top: 50%;
left: 50%;
margin-top: -18px;
margin-left: -206px;
z-index: 999;
display: block;
}
3) Try clicking on login and register button on the homepage - http://dev.topyaps.com/.
This is the actual styling of the login/register popup. But in the post "How awesome are you?" , when we click on login/register the styling changes to the styling of the center box (the one that appears on clicking the Submit button).
Css of login box -
element.style {
display: block;
position: fixed;
top: 50%;
left: 50%;
margin-top: -163.5px;
margin-left: -230px;
z-index: 10001;
}
Please try to tell me the way by which I can fix these issues.
[Edit member="Tadit"]
Added
pre
tags.
[/Edit]