Is position:absolute without top or bottom a good CSS practice?

I have a markup like this:

<label>First Name: <input type="text" /></label>
<label>Last Name: <input type="text" /></label>
<label>Email: <input type="text" /></label>

And a 开发者_如何学JAVACSS like this:

label{display:block; padding:10px 0;}
input{position:absolute; left:100px;}

And it's result is like this in almost every browser I test:

It works fine while there is no top or bottom in CSS code for absolute positioned inputs. My question is: Is this kind of aligning elements a good practice and are you know any issue with a browser with this kind of positioning?

Here is fiddle of the code.

CSS does not have to be semantic. Semantic HTML means that the tags, identifiers and classes have meaning.

CSS is purely representational and does not have to have meaning.

And absolute positioning without defining top and bottom is perfectly OK (it just defaults to auto)

position:absolute; takes an element out of the normal flow. If you just want to move the element a bit, position:relative; is a way better choice - you can give an offset to the original coordinates instead of having the coordinates depend on the elements around. For more details, refer to the standard.

CSS has no notion of "semantic", it just styles anything, div or article.

Side issue in your code: Explicitly associating labels with their controls is preferred:

<label for="fname">First Name:</label> <input id="fname" type="text" />
<label for="lname">Last Name:</label> <input id="lname" type="text" />
<label for="email">Email:</label> <input id="email" type="text" />

to Implicit association (wrapping the controls in the label like you have.)

See WCAG 2.0 Technique 44

I experienced position absolute without "top/left/bottom/right" with margin set (negative one if necessary) had saved solved my strange problem repositioning element in various modern browsers. Element is taken out of the normal flow as its position is no longer calculated against its container.

Adding top/left/bottom/right make the default (correct) behaviour to apply - the element in question looks for closest parent with position relative / absolute then adjusts its position.