Z-Index not taking effect? - javascript

I'm trying to use a background image, with divs over the top of it. All the elements have position attributes and i've currently given the background image an opacity of 50% so that I can see behind it. The z-index of the div 'wrapper' is higher than the image but is still appearing behind. Also it's at the bottom of the page and I'd like it to appear at the top and have a height if 100%.
Here is an image of what i'm seeing currently:
As you can see the div is behind the image and can only be seen becuase of the image opacity.
Any help would be greaty appreciated, thank you.

It's because your #Page container has a z-index lower than the image, even though the wrapper has a z-index higher. The parent container's Z takes precedence.
Simply removing the z from your #Page will probably fix the issue (without having a fiddle to test that on, but pretty sure).
Additionally, you don't actually need z on all this stuff. You could take advantage of the normal stacking order of elements, with the elements lower down in the markup being stacked on top of earlier elements....

The z-index value of a child element only plays a role within the scope of its parent. In this case, #wrapper is inside of #Page and has a z-index of -1000 relative to #home-bg z-index of 2.

Related

Positioning from fixed to static

I need to have a fixed div on screen only between certain points, defined by whether certain elements are on top of the screen or not.
I tried to accomplish it by changing the position via JQuery. The problem I found is, at the bottom point, when I change the position from fixed to static, the div jumps away, instead of start scrolling from that point on.
Here is the jsbin: http://jsbin.com/woroyejahe/5/
Thanks
Just get the position of the lower div and set it as the top for your CSS style with position: absolute.

CSS3 transition z-index

Here is the website I've been working on: Comotional - test site
I am using flipping cards within "Who we are" section and have problems with z-index. Whichever z-index and css combination I tried (even added additional divs on the back side), I can't fix the flipped content appearing below other cards. If you hover over these, you will see what happens and will see where the problems happens. Is there anyway to get this working via js?
It's limited by your container height, not the z-index. Set the height auto and find another way to set up the grid - perhaps making something like a row container along with a clear div while setting height to the front side of the card.
i think the problem is that you have lots of nested elements so changing the z-index of a nested element does not make them appear above on the stack unless until you make the z-index of the parent container greater than other parent containers that are blocking the view.
you can use hover event to change/increase the z-index of parent container on mouse-in and default on mouse-out
link to justify what I am saying

Absolute layout of an element that will overflow but is only constrained on 3 sides

I need to cerate a layout where a div that is the scroll container is absolutely positioned on three sides ( left,right and bottom ) but sizes dynamically with it's sibling container above. Both the scroll container and the sibling are in a fixed dimension container. I have made a jsfiddle which demonstrates my problem.
http://jsfiddle.net/HKu4j/4
If you follow the click instructions there you will see that when you click the top container after clicking the second container it resizes which ideally would push the top of div.myscroll down. This doesn't happen since div.myscroll has top set to 20px; Is there some way with the new CSS3 flexible box layouts to make this work ? I am looking for a solution that uses CSS rather than setting geometry dimensions explicitly with javascipt as I have done in the past.
I'm not sure that this is possible using css alone.
Try this jQuery dynamic width setting example: jQuery/CSS: Set dynamic width by content, avoid inheritance

Get image height in IE of display:none image?

I have images who are set to display:none. I am using javascript (document.getElementById('elem').height) to get the height/width of these images.
This works in other browsers, but IE reports the height to be 0 (presumably due to the fact that its display is set to none - because when I remove the display:none, the height is reported correctly). I tried wrapping the images in a div and setting the div's display to none instead of the images - but this didn't work either.
What is the typical work around for this?
If you are interested in the size of the image itself, apart from any styles or attributes set in the html, you can measure a new Image with the same src.
It doesn't add anything to the document's html or stylesheets, or even to document.images.length if you are only testing included images.
var im=new Image();
im.src=element.src;
return [im.src, im.width, im.height];
you could use visibility: hidden;, maybe in combination with position:absolute too prevent "flickering" which you will remove after reading out the height.
Try this:
Position it offscreen
set it to display:block
get its height
set it back to display:none
re-position it back where it was
display:none; elements are defined as not having any display properties, so height and width shouldn't be used while it's in this state.
You could try setting it to visibility:hidden;, which would retain height and width. The downside of this is that visibility doesn't affect it's position in the page flow, so it will also retain the space it takes up in the layout. You could counter-act that by setting the position to either absolute or fixed to take it out of the context flow. You may also want to set the z-index to a negative value to ensure it gets hidden behind the rest of the page elements, otherwise it might block other elements from being clicked, etc, even though it would be invisible.

Move image inside a div?

I have a div with a specific width and height. And a smaller image with the same width but much less height. How could I
Position the small image to the inside top of the big div (but still all the small image to be visible in it)
Animate the small image from the inside top of the big div to the inside bottom (and again, still keep it all visible)
Inverse the process to go to the top again
I 've been totally confused with this one. All widths/heights are known, so they don't need to be calculated dynamically.
Thank you.
You can see an example of the code here
In general look at the .animate() method of jQuery.
Set position:relative on the containing div.
Set position:absolute on the image.
Use setInterval to increment the top CSS property of the image until it equals (containing div's height) - (image's height)
Once that is reached, do the same except decrement the top property until 0
goto 3 :)

Categories