CODEWITHSUNDEEP
htmlcssbutton
user3281950
user3281950

Reputation: 143

Button keeps changing his position

This is the header of my homepage.

The problem is with the "REGISTER" button. When I scroll down the button keeps it's position, but scrolls down with the page. This image describes the problem.

Also, if I change the web browser's size, the button changes it's position.

My actual CSS code:

.accp_register {
position: absolute;
width:209px; height:43px;
z-index:99;
top:0; right:80px;
left:896px;
position:fixed;
}
.accp_register #register_button {
    background-image:url(../images/register.jpg);
    /*background-repeat: no-repeat;*/
    background-position:0 0;
    display:block;
    width:209px; height:43px;
    position:fixed;
    margin-left:0px;
    }
    .accp_register #register_button h1 { display:none; position:fixed;}
    .accp_register #register_button:hover {background-position:0 -43px; position:fixed;}

.accp_register #accp_button {
    background-image:url(../images/userpanel.jpg);
    background-repeat:0;
    background-position:0 0;
    display:block;
    width:209px; height:43px;
    position:fixed;
    }
    .accp_register #accp_button h1 { display:none; position:fixed;}
    .accp_register #accp_button:hover {background-position:0 -43px; position:fixed;}

.fixed{

    position: fixed;
}

Upvotes: 0

Views: 89

Answers (2)

ciprian2301
ciprian2301

Reputation: 274

Set position relative not position:fixed;

Upvotes: 0

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

Its because you have used position:fixed in your CSS for button. Position fixed will keep it on screen even when you are scrolling.

Reference: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Upvotes: 1

Related Questions