CODEWITHSUNDEEP
htmlposition
Ashish Sharma
Ashish Sharma

Reputation: 342

Div overlapping on one another

here's jsFiddle: FIDDLE

There are two div.One is in between the page content and another div is at the end of content(comes after scrolling).Now the problem is I wanted the first div to overlap second div but to do that I don't know how to do it.It will be a dynamic page so the page height keeps on changing so I can not position it with absolute and top or bottom keywords. How to do it ?? Note: the requirement is overlapping of orange on red.

Upvotes: 0

Views: 91

Answers (2)

zipzit
zipzit

Reputation: 4027

The answer lies in using jquery to determine the location of the first (orange) div than use those values to control the location of the second (red) div. http://jsfiddle.net/4Zaqg/5/ Took me awhile to figure this one out.. the issue was the extra set of { } brackets.

Obviously I didn't touch the z-index, but instead chose to change the size of the divs slightly to verify what is going on... OH, and please tell me this wasn't a homework assignment.

Add this script to your html file

$(document).ready(function () {
     var o = $("#orange").offset();
     $("#red").offset({left:o.left, top:o.top});
});

Upvotes: 1

Ashish Sharma
Ashish Sharma

Reputation: 342

I found the way.we can have a CSS code like this to do this:

#orange{
    width:100%;
    height:50px;
    background-color:orange;
    position:relative;
    top:50px;
    z-index:2;


}
#red{
     width:100%;
    height:50px;
    background-color:red;
    z-index:1;
}

Fiddle :click here

Upvotes: 0

Related Questions