First off, please let me say I'm pretty new to CSS. Still lots to learn! I'm working on a site at https://web.archive.org/web/20130709112702/http://www.thesweet-spot.com/test77
Everything is working great, EXCEPT that the main content box is being placed under the fixed-position logo instead of over it, even though the z-index on the logo is lower than the z-index on the content box. What can you geniuses tell me?
There's actually two reasons:
Its parent is set to show up behind the logo. Any z-index applied to elements within that parent element will only apply to other elements within that parent. All the elements within the parent will be stacked accordingly, then that entire element will be put behind the logo as specified by its stack order.
A z-index only applies to elements with position of absolute, fixed, or relative. It does not apply to elements with static position.
It is constrained by the parent container's z-index. You cannot set a child to a higher z-index than the parent; it caps at the parent's value.
You could make the stripes a background of the body tag and then set the container to have no background. Once that is done set container to a higher z-index.`
Related
What I'm trying to achieve:
Two plus rows with each containing three columns. For the rows, I have specified relative positioning containing three images per row, for two rows. This works fine.
I want layered divs beneath those images, using position absolute and negative z-index, which also works fine for the first row. The second row, the images line up fine, but the absolute positioned divs within appear on the first row.
jsFiddle here:
http://jsfiddle.net/Ajdin/tNGCM/
I've read a few questions on the board, and googled css absolute positioning since that's where I'm thinking I may be misunderstanding something. Please help :)
Since the div ".hireBioImg" set "float" property, it wont be extended the height to its parent. so in hireBioRow, you need to add "clearfix" to wrap float elements inside.
Please see updated here:
http://jsfiddle.net/tNGCM/1/
And more about clearfix:
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
http://www.webtoolkit.info/css-clearfix.html
In many places I have put elmeents nested in other elements. I can't deduce when a child element causes the parent element to expand. I don't have any code to post as this is a general conceptual question so that I can design as needed.
The first thing that you should understand is the CSS Box Model. That will help you understand how properties of an element cause it to have the size and dimensions that it has. Another good resource is here.
To answer your main question in the most simple manner (and being very general):
Block level elements take up as much width as possible (obeying their CSS width rule). Their height is dependent on their content and the CSS height property.
Elements like div, p, and ul are all block.
These will generally cause your parent element to expand.
Inline level elements will continue to flow together in a line, filling up only as much width and height as necessary.
Elements like span, em, strong are all inline.
These will cause your parent element to expand only when there are enough of them on the same line to warrant another line.
There are many ways to tweak the display of elements with CSS.
Get firebug for firefox. You can browse the DOM (the HTML structure of the page) and it will highlight elements according to how the "browser's eye" sees them (versus how they look aesthetically).
A few general rules of thumb:
Children will expand their parent's height as long as they're not floated or absolutely positioned, but...
You can "clear" a series of floated images http://www.quirksmode.org/css/clearing.html to make the parent element expand
If you use top positioning for a relatively positioned child element, the browser will still see that element in the exact same place. In other words the height of the parent element will stay the same regardless of where the child is relatively positioned to.
Using positive or negative margins on a child that is display: block will add or subtract height from its parent
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).
I'm trying to improve my css a little, specifically use of z-index to overlap elements and change stack order. I created this fiddle but when I change the values of the z-index, the layers stay the same. I can't get z-index to do anything.
http://jsfiddle.net/mjmitche/AfPWE/24/
Without using a z-index, a div inside of another div always appeared on top. I tried to put it underneath the container div using z-index but with no luck. So then I thought maybe divs that are inside of each other can't have their stack order changed, so I made another div outside of those but couldn't change it's stack order either
This doesn't work as the z-index of an element is inherited from its parent. To get this to work, you'll have "de-child" the elements:
<div id="green"></div>
<div id="black"></div>
<div id="pink"></div>
And also z-index needs to have a position also, but you have that.
Divs that overlap need to be at the same level as each other. Check this fiddle out:
http://jsfiddle.net/jmqwZ/
I've created an "other" div at the same level as the pink one. You can try to swap their z-indexes.
I have a div which I have set to absolute position and z-index above all the other divs on the page. The issue I'm having is where the absolute position div sits is above some divs that are interactive with the users mouse. Is there a way to turn off the interactive state of the absolute positioned div so the divs below are active.
Absolutely positioned elements use the z-index for stacking - which explains why content below is inaccessible. It is, unfortunately, not a case of interactive states, but simply of obstruction.
Any absolutely positioned block elements will obscure elements set below them as far as the dimensions of the uppermost element stretch (set a border on the div to see exactly how far the obstruction is occurring).
Your best bet (within the bounds of css) is to either position the obscuring div below where you need interactivity, or to add the properties of the obscuring div directly to the div being
obscured.
EDIT: i.e. there is no property in CSS to turn an interactive state on or off.
UPDATE 2011/11/11: see https://developer.mozilla.org/en/CSS/pointer-events for a solution to the question. pointer-events: none; is a valid solution to the question.