javascript code for show and hide div using z-index property

Question

I have written this code to show n hide a div on mouse hover event. Its working fine.But only problem is when div is open on mouse over event all other div and other content goes down and down as per the height of opening div, What i want exactly, the main div which I need to show and hide should be open using Z-index property such that other content should not be affected from their position. I tried a lot, but could not find any solution. please help me guys!! Here is java script code:

var $j = jQuery.noConflict();
$j( document ).ready(function( $ ) {
$j ("#citydrop").hide();
$j ("#cityclick").mouseover(function () {
$j ("#citydrop").slideDown('slow');
});
$j ("#wrapper").mouseleave(function () {
$j ("#citydrop").slideUp('slow');
});

user2587132 · Accepted Answer · 2014-03-11 11:25:19Z

1

add position:absolute to #citydrop then a higher z-index say z-index:2. absolutely positioned elements are removed from the normal flow of the document, Hence won't affect other elements' positioning

answered Mar 11, 2014 at 11:25

user2587132

Sign up to request clarification or add additional context in comments.

Comments

mMoovs · Accepted Answer · 2014-03-11 11:27:17Z

0

You need to set the #citydrop divs position to absolute and define it's place. For example.

#citydrop {
    position: absolute;
    top: 0;
    right: 0;
}

Just play around with top/right/bottom/left attributes to find a good spot. Remember to add position:relative for the #citydrop parent element so it'll stay inside it.

answered Mar 11, 2014 at 11:27

mMoovs

9349 silver badges18 bronze badges

Collectives™ on Stack Overflow

javascript code for show and hide div using z-index property

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related