CODEWITHSUNDEEP
javascripthtmlcss
user3649899
user3649899

Reputation: 157

hover issue. alignment changed. it moved down

http://jsfiddle.net/mah2806/VcnLk/

what should i do to make the form from not affecting the word testing testing when i cover it. i want it to be like overlapping the word testing testing

MY HTML

<form>
<p id="login">     
    <span class="label">Login Here</span>       
    <span id="loginForm">        
        <span class="form-elements">
            <span class="form-label">Name:</span>
            <span class="form-field"><input type="name" /></span>                        </span>        
        <span class="form-elements">
            <span class="form-label">Password:</span>
            <span class="form-field"><input type="password" /></span>                    </span>        
        <span class="form-elements">
            <span class="submit-btn"><input type="submit" value="Submit" /></span>     
        </span>

    </span>          
</p>
</form>


<p>TESTING TESTING</p>

Upvotes: 0

Views: 41

Answers (1)

mohamedrias
mohamedrias

Reputation: 18566

DEMO

#loginForm {
display: none;
background: #ccc;
width: 250px;
height: 100px;
padding: 20px;
color: #333;
z-index: 99;
position: absolute;
}

This will do the trick. Replace your #loginForm with the above code.

I have added 

 z-index: 99;
 position: absolute;

To make it overlap the text

Upvotes: 2

Related Questions