CODEWITHSUNDEEP
cssborderpositioning
GuilleDelicia
GuilleDelicia

Reputation: 49

Border interfere with absolute positioning

I am trying an animation in which you click the button, and it fill up with the color from bottom to top. When you click it, the element with position absolute changes and goes up the box.

Demo (after clicking the element, try resizing your window and see the problem)

Before animation the css is:

#boton_auto {border-bottom: 5px solid #2dbbdc;}

After animation (80px is the height of the box):

#boton_auto {border-bottom: 80px solid #2dbbdc;}

I know I could use top:0px; but I need the elements to be align baseline with other buttons. Am I clear?

Thanks for any help!

Upvotes: 0

Views: 807

Answers (2)

Alvaro Menéndez
Alvaro Menéndez

Reputation: 9012

To start in your fiddle you are not calling properly the svg class (you are missing the dot. You wrote "svg" insteed of ".svg".

And I woudn't use border to achieve your efect. If you are looking for a full responsive image as the width 28% may indicate I would insteed use a full absolute container which will grow (vertically) on click:

.blue {
    height:4px;
    position:absolute;
    bottom:0px;
    width:100%;
    background-color:#2dbbdc;
    z-index:-1;

}

then you won't have problems with the span (the AUTO text), going to the top.

I've made this fiddle for you

Upvotes: 1

Logan M
Logan M

Reputation: 368

If i understand the question correctly You could use position: relative; and then describe how far away from the bottom of the button you want. Ex:

*if you want 80 pixels you could just add them. Start + finish.

this is for the bottom (before animation)

# boton_auto {position:relative;
    border-bottom: +85px solid #2dbbdc;}

this is for the top (for after animation)

# boton_auto {position:relative;
    border-bottom: +5px solid. #2dbbdc;}

Upvotes: 1

Related Questions