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'
Related
So, I tried doing position:absolute, but whenever I place something new, (eg a div) the other div gets pushed down.
Eg. without other div
Box
With other div
other div
box
Thanks :D
Are you sure the CSS rule is not ovewritten? (Check this with a browser code inspector, such as Firefox's Firebug or Opera's Dragonfly)
Additionally, If you want the div to be put on a place despite srolling,
use
position: fixed
instead. This will keep your object on a fixed place in the page.
You can usually use position:fixed or position:absolute.
If you want the element to be stuck on the screen no matter how to scroll, you can use position:fixed. Make sure that your top & left or bottom & right are set appropriately. Also make sure that the z-index is set appropriately, so no other element is covering it.
position:absolute; DOES depend on the parents of that element. If a parent of that element is positioned, then the absolute positioning will position the element within that element.
do you have examples of your code?
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.
I have an HTML element which is set as position: fixed in the CSS. However, when the user scrolls to the top of the screen, I notice the fixed element overlaps another element.
How do I tell the browser that I want the element to stay below the other element, but otherwise ignore the scrolling like most fixed position elements do?
EDIT: Your answers are all great, but I guess I wasn't specific enough: I want the object to stop moving, rather than go behind the other element. Also, I can't use jquery; I can use Javascript, though.
If you want to to only start scrolling after you've 'passed it', use jQuery Waypoints. Specifically sticky elements.
If you just want to to hide behind the other element, assign it a z-index lower than the other element. (z-index only obeys elements with position: absolute, relative, or fixed.)
Z-indexing rules still apply to fixed elements. Give it a lower z-index value to have it render behind the other element(s).
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.
I have noticed that both IE6 and IE7 push the parent div down when an element inside has padding-bottom ... what is the best fix for this? Is it possible to fix this with valid css?
EDIT
The solution I used was to set overflow: auto in the child element (as mentioned below in the accepted answer). I went with this approach because my child element height was dynamic, and thus I couldn't set it.
padding-bottom is added to the child elements total height, so even if the child element is empty, padding-bottom:10px; will give it a total height of 10px. And in all modern browsers, the parent element will expand to give space to it's child(s).
But if you wish to have a set height on the parent, you could just set a height on the parent and control the child's content by overflow:auto/hidden/scroll..
Or you could set parent as position:relative; and set position:absolute; to the child element.
Kinda depends on exactly what you want..
Check your setting a doctype and not running into quirksmode, next use a reset stylesheet to make sure that all your elements start of on the same foot.
If your still getting additional padding in a certain version of IE, use a conditional comment to add an additional stylesheet for that browser.
I haven't seen IE8 or Firefox "push the parent down" when padding is applied to a child element; it's just that the parent element's height expands to accommodate the child. This is the correct automatic behaviour in CSS. I made a brief demo:
http://robertgrant.org/testbed/paddingbottom.xhtml
Feel free to try it in IE6/IE7 and see what happens (needs Javascript enabled to make the link work, but you can see what's going on even without that).
If you want to constrain the parent's height, then set it (e.g. height: 100px) and set its overflow property to hidden.