CODEWITHSUNDEEP
htmlcss
Saranga
Saranga

Reputation: 520

how to toggle div with another div

How do I solve this using css. enter image description here

When I expand the contents in menu menu expand like second picture. This is my css

.contents {
    /*margin-left: 165px;*/
    /*margin-top: 60px;*/
    position: absolute;
    top: 120px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-y: scroll;
}

and this is my html with contents.

<div class="contents" id="subContents">

</div>

I tried with position 'relative' but it doesn't works for me. By using z-index there's a problem like this. enter image description here http://jsfiddle.net/ssaranga/o7sh1j0f/

Upvotes: 0

Views: 148

Answers (2)

U r s u s
U r s u s

Reputation: 6968

One way of doing it is to add the z-index property to your toggle menu class and assign the highest value to it, according to how many stacked elements you have.

z-index specifies the stack order of an element. Different browsers have different max-min values.

The advantage of using a number larger than the actual stacked elements is that you don't have to go back and change the z-index value when you want to add more elements.

Note that z-index only works on positioned elements.

For example, you could do something like:

.toggle-menu{

position:relative
z-index: 999;

}

Upvotes: 2

Jim Aho
Jim Aho

Reputation: 11867

The positioning is not your problem, it's the fact that your menu div is shown in the background.

You have html elements stacked on top of each other, and will have to work with the CSS z-index propert to adjust the element on the z-axis.

Upvotes: 0

Related Questions