Solved

Having a Div overlap other divs, but still scroll with the page.

Posted on 2011-09-27
6
237 Views
Last Modified: 2012-05-12
I am trying to get a div tag that I have overlapping other divs with the "z-index" and 'position' rules. Everything looks good except the div stays put even when the page scrolls. Is there a way to get this fixed position div to scroll with the rest of the page?
0
Comment
Question by:RNB
  • 3
  • 2
6 Comments
 
LVL 5

Expert Comment

by:Rainverse
ID: 36711646
0
 

Author Comment

by:RNB
ID: 36711774
@Rainverse:

I want the fixed div to scroll. On the link you sent the navigation box stays where it is and the page scrolls behind it. I want the fixed div to scroll with the page.
0
 
LVL 5

Expert Comment

by:Rainverse
ID: 36711801
You want the content in the div to scroll while the main window is scrolling. Am I understanding you now?

-MJC
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:RNB
ID: 36711897
@ Rainverse:

Yea I am only using this method for its overlapping capabilities. I do want it to scroll with the rest of the page though.
0
 
LVL 5

Expert Comment

by:Rainverse
ID: 36712056
Try this javascript:

window.onscroll = function () {
  document.getElementById("divID").scrollTop = document.body.scrollTop;
}

Open in new window


-MJC
0
 
LVL 7

Accepted Solution

by:
Alicia St Rose earned 250 total points
ID: 36720194
Hi RNB,
Looks like your parent div needs: position: relative;
You need to have your absolute positioned div relative to the next outside div. Right now it sounds like your div is positioned relative to the browser window. Once you add this code you will have to adjust your top: ,  left: , bottom: , right: , (whichever ones you used). Because now it will be using the parent div as a reference.

Do you have some code or a Url we can look at?
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now