Problem part 1: Basically I have the age-old IE problem of overflow: hidden; not working in IE. The fix (which does work, admittedly) is to also add "position: relative;" to the element/parent; however this causes a problem for me. Firstly I want to know if there's another way without appending position relative.
If this is the only solution though, I'll outline the problem it causes:
Problem part 1b: I'm using jquery 1.4.2 and jquery ui 1.8.4. The concept is basically for the user to pick up a card (draggable li item) from the pile (ul surrounded by div) and place it into the appropriate category (initially empty ul items). Because positioning each card on top one another in the pile with css with position: absolute; would cause problems with the interaction, I've let them all display one after eachother in a column and used a div of set height and width with overflow: hidden to obscure the rest of the cards instead. Works great in FF, but in IE doesn't work due to the overflow: hidden bug. If I put in position: relative, for both browsers the z-index of the card when it is dragged appears to be behind everything outside of its parent div. I've tried changing the z-index on every element on the page to specify the order, but this appears to be disregarded entirely. I'm really hoping not to have to get into the jquery to make changes. Any solutions?
Attached are pics which make this wall of text a little clearer. Picture 1 is how it should work and does in FF without position relative. Picture 2 is when position relative is added to the mix. Both pictures show a card being dragged to a position in a new column.
Picture 1: http://plldd.net.au/storage/overflowhidden.jpg
Picture 2 is at the same location and is called positionrelative.jpg
Thanks for any help you can offer.
can you try wrapping it all in another div with position relative? This div surrounding everything instead of the immediate parent.
Related
I have a dropdown that I would like to display properly outside of the container which has a horizontal scrollbar. It is currently "buried" inside the container.
See demo: https://codepen.io/lzhoucs/pen/EdYgXr
The container has a hard restriction of:
width: 300px;
overflow-x: auto;
My only requirement is that the solution should works with the horizontal scroll bar, and preferably no javascript.
See attempt 1: https://codepen.io/lzhoucs/pen/KGPNpb. This version sort of works when we don't scroll. It beaks as soon as we scroll.
See attempt 2: https://codepen.io/lzhoucs/pen/KGPNaE. This version breaks the scrollbar entirely
This article has a pretty good explanation of the issue and offers a workaround, although it still requires JS to properly position the submenus: https://css-tricks.com/popping-hidden-overflow/
But in your case it seems enough to just remove position:relative from .dropdown - https://codepen.io/anon/pen/KGPWEx
This is due to the fact that even absolutely positioned elements just assume the position they would have in normal flow, when the “coordinates” (top, left, ...) aren’t explicitly specified, but left at their initial default of auto.
(This won’t work though, if any of the ancestor elements further up the tree is positioned - like if you add position:relative for .container in your example, it breaks again. In such a case, I think you might have to go for the “full” workaround as outlined in the mentioned article.)
I am struggling to make a webpage backwards-compatible with IE7 (I know, 'IE7?!', but that's what is on our school computers). I am trying to show a div the full size of the page to darken the body and show two specific divs on top of that. However, when I view the page, the dark div appears over all other elements on the page - even those with a higher z-index.
You can see the page here and view it in IE7 using netrender.
I have applied positioning to all of the elements and it seems to have done nothing. Maybe it is just my eyes?
I think if you pulled the modal box div out of the #wrapper div, it might work. It appears older versions of IE compare sibling z-index values, so the #blackBg div is comparing itself to the #wrapper div, which has its z-index set to auto. If the modal box was a sibling to both and had its z-index higher, it just might solve the issue.
As far as I am concerned, it is not possible so I gave up in the end.
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.
I have a form that uses a div that is positions over some input elements. For some reason, those input elements are above the positioned div, even though the div has a high z-index. Really not sure why this is happening, as the input fields don't even use absolute positioning, so I would think they would never be on top of another element.
Example (Click into Person, Status or Residence field):
http://www.puc.edu/puc-life/funnybook/little-black-funnybook
It looks like you don't even need to set a high stacking order for the .item .answer selector, at least in the Gecko engine. Try removing the position and z-index and see if it's consistent x-browser?
Edit: Ah I forgot I had applied position:relative to the div.item element, can you try toggling that when it shows up and unset it when you hide it?
That or leave position:relative on all div.items through external CSS and toggle the z-index to be '2' when the stuff pops ups and back to auto when it's hidden.
z-index is the solution but it does not work proper with youtube movie iframe, for that you would have to use wmode='transparent'
I'm working on an application with a map and there is a div in the corner with some stuff in it. You can click on this map to bring up some information in a little window. The window is, in some cases, being covered by the div in the corner.
I want the opposite effect (window covers div). I figured this would simply be a z-index issue but I'm unable to get it to work. This is with IE7 and from reading up a bit it seems like z-index won't work unless it's inside of an element that is positioned.
The elements seem to be positioned properly to get the z-index to work right but I'm having little luck. I've played around with adding styling via Firebug but haven't had any luck in getting anything to change. The window really is just two divs one absolutely positioned one and a relative one inside of it.
Is the z-index the only thing that could be the problem here or is there something else I don't know about?
Are there any other methods to achieve the effect I want? I cannot simply hide the div via jquery or something because part of it should be visible from behind the window that opens on the map.
You are hitting the stacking context bug
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
Every positioned div in IE will create a new stacking context and prevent z-index from diferent stacking contexts to come on top of others.
The solution is to have the window you want on top up in the tree (into the body for example) and z-index value grater than z-index of all parents of the other div covering your window.
Extensive information to understand the problem here:
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
positioning and negative margins is the only way to get elements to overlap that i know of. z-index is just used to explicitly tell the browser how to layer the elements.
as to your problem, IE requires the container elements and/or elements that you are overlapping to have position:relative; or position:absolute; for z-index to work properly. When someone say positioning they're usually implying having the position property set in CSS. Also when working with z-index make sure that the overlapping elementa are at the same level with each other.
Hope this helps
Quite simply, the order of the elements in your HTML file will determine stacking order. If you want an element to be above another then make sure it comes later in the HTML.
You can only swap the stacking order on elements that are all in the same containing element. For example if you have two divs and they both contain 3 images you cannot make images from the second div go below images from the first div.
You need to plan your HTML ahead if you need complex stacking orders.
As hinted by the other answers, position:relative and position:absolute reset the "stacking-context" in IE.
If you want a lazier answer you could use javascript and hide the div when you click on the map, and show it when you close the map.
You will have to do this with any selects on the page anyway because in ie they don't work with z-index.
I ran into this same issue a couple days ago and found the negative margin as suggested by Darko Z worked great. (My rep isn't good enough yet to vote for Darko)
I wrote a quick post on it.
http://www.swards.net/2009/03/layering-html-elements-without-using.html