html - Unexpected behavior on elements with transitions in their css -

html - Unexpected behavior on elements with transitions in their css -

i have written css elements, , causing unexpected behaviour. using:

transition: 0.2s;

when refreshing page, element css property, unexpectedly start off in area of page, , move set positions (set in other parts of css). the,

position: absolute

property used position elements, causing unexpected behaviour?

here css link:

.sublinks_links { position: relative; width: 100%; height: 50px; line-height: 50px; text-align: left; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; font-size: 13px; color: #999; margin-bottom: -1px; cursor: pointer; text-transform: uppercase; } .sublinks_links > span { margin-left: 30px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;

}

.sublinks_links:hover > span { margin-left: 40px; }

and relevant html css:

<div id="sublinks"> <div class="sublinks_links_selected"><span>link text</span></div> <div class="sublinks_links"><span>link text</span></div> </div>

i have found positioning issue. using text-align , margin-left position elements. there no dead positioning, caused unwanted behaviour.

html css positioning transitions