I am building a page that needs to have some elements which stick to the top of the page when they would otherwise be scrolled off the screen. I managed to do this using position:absolute. Everything was working perfectly, but it needed momentum scrolling. I added -webkit-overflow-scrolling: touch to the css of the scrollable area. This broke everything. My sticky elements with position:absolute are now just scrolling with the rest of the content.
My question is this:
Why does -webkit-overflow-scrolling: touch affect absolute positioning, and is there a way around this?
UPDATE: I added an alert whenever a child element becomes "fixed" or "unfixed". The alerts continue to fire, so the styling is still being applied, it just isn't working. This means that it's not a problem with keeping track of scroll position but rather a problem with the styling.
UPDATE: I tried using position: fixed instead of position: absolute and -webkit-overflow-scrolling broke that too
UPDATE: After a lot of digging, I found references to this problem here and here. However, the only proposed solution in both cases is to restructure the DOM so that the sticky elements are not in the scrollable area. This is a difficult thing to do in my case, and I would prefer not to have to. Have things progressed since ios5 or is that still the only option?
On the last question - yes the issue is present in ios5. Extracting the absolute positioning element outside of the scrollable area worked fine for me.
I have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.
I've made a horizontal menu.
What it should be doing is having the elements under it line up along the right side in an orderly fashion. Instead, it jumps throughout page seemingly randomly, and has other issues such as flickering. I've been stuck on making it for awhile and would love some tips to resolve these issues. Here is a JS FIDDLE showing the issue, all stripped down.
Thanks.
Here are current issues:
The submenu does not align perfectly with the right side of main nav even though its offset is calculated by main navs offset + width.
Flickering(Moderately solved using large borders)
Elements sometimes doesn't catch mouseover, to reproduce I am moving my mouse all the way down and off and up it and off
The menu slide out part goes to the bottom right of the page, in a somewhat random order, and continues to move further away (yikes)
The solution to the flickering issue is to make the submenu items overlap or touch. This can be done by adding a one-pixel white border to the menu item.
When it comes to the alignment issue (which could have been intended), you need to add (twice) the element's padding and border as the width is inside the padding.
I was recently found a strange behavior in IE9(haven't tested under IE8):
http://jsfiddle.net/qktfq/5/
Remove the yellow element(by clicking it) will cause the scrollbar in blue element scroll back to top. This behavior will happen only if yellow element is floated or absolute positioned.
This behavior is really annoying. Any help on how to avoid it will be a tremendous help! Thank you.
Got it! It's because of the positions. Try adding position:relative to the scrollable div (in this case, div.outer) and you will see that it works.
Better: You can wrap everything in a div with position:relative and it should do the trick.
After a little bit of research, i found out this behavior will only affect the elemnt that close to floated or position:absolute element. If i add another element between them, this behavior will gone.http://jsfiddle.net/qktfq/34/
But add an empty element only for this resaon seems odd...Orz...
I've run on a little problem today: I have a JS drop down menu and when I inserted a GoogleMap... the Menu is rendered behind the Google Map... Any ideas on how to chance the z Index of the Google Map?
Thanks!
If your problem happens in Internet Explorer, but it renders the way you'd expect in FireFox or Safari, this link was extraordinarily helpful for me with a similar problem.
It appears to boil down to the idea that marking an element as "position:relative;" in CSS causes IE6&7 to mess with it's z-index relative to other elements that come before it in the HTML document, in unintuitive and anti-spec ways. Supposedly IE8 behaves "correctly" but I haven't tested it myself.
Anutron's advice is going to be really helpful if your problem is with a <SELECT> form element, but if you're using JavaScript to manipulate divs or uls to act like a drop down I don't think it's going to help.
Note that dropdown menus in some browsers (ahemIE*ahem) cannot be zPositioned at all. You'll need to use an "iframe shim" to obscure it or hide the dropdown entirely if you want to position something above it. See: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim
The map is already wrapped inside a div. Give it a negative z-index and it works - with one caveat: the gmaps controls aren't clickable.
If your menu is wrapped in a div container e.g. #menuWrap then assign it position relative and give it a high z-index.... e.g.
#menuWrap {
position: relative;
z-index: 9999999
}
Make sure your map is inside a div
Try setting your menu z-index insanely high. Apparently Google Maps uses a range from -9000000 to 9000000.
Wrap the map in a DIV, give that DIV a z-index of 1. Wrap your drop-down in a DIV and give it a higher value.
IE gives the problem
every div that is wrapped in a relative positioned div will start a new z-index in IE. The way IE interprets the outer relative divs, is in order of html. Last defined is on top. No matter what the z-indexes of the divs inside the relative positioned divs are.
Solution for IE: define the div that should be on top at last in html.
(So z-index does work in IE, but only per holder div, every holder div is independent of other holder divs)
z-index (especially in Internet Explorer 7) really didn't work for me. I tried many different combination's of high vs. low map z-indices but had no joy.
By far the simplest/quickest answer for me was to re-arrange my mark-up/css to have my flyouts/rollovers listed in the mark-up above/before my map (literally, before the <div id="map">), this way I could let the z-index remain default (auto) and move on to more important aspects of my webapp ;)
Hope this helps!
<ul id="rollover">
<li>There</li>
</ul>
<div id="map">...</div>
I created a google style drop-down and had the same issue...using the V3 api for google maps, you just create a control and place it on the map using:
map.controls[google.map.ControlPosition.TOP].push(control);
Since it is a drop-down, just make sure the z-index of the containing div is highest (z=3) then the drop-down part containing the menu items is lower that the containing div (z=0).
Here's an example.
From my experience, the only time you need to use shims is for plug-ins (like with Google Earth).
No need to set the z-index for both the map and the menu. If you simply set the z-index of the menu higher than the map, it won't necessarily work.
Set the z-index of the map div to -1. Now the menu will drop down and display over the map.........but if you're using a wrapper then the map will no longer be interactive as it is now behind the wrapper.
To work around this, use onmouseover and onmouseout functions in your wrapper div. Make sure those are in your wrapper div and not your map div.
onmouseover="getElementById('map').style.zIndex = '10000';"
onmouseout="getElementById('map').style.zIndex = '-1';"
I've found that sometimes inadvertently neglecting to declare the !doctype will cause this kind of hiccup in IE, when other browsers seem to be able to negotiate the page fine.