If I have this:
<div id='parent'>
<p>Parent stuff here</p>
<div id='child'>Child stuff here</div>
</div>
Is there a way to make the parent div appear overtop of the child div without using position:absolute? Basically, you wouldn't see the child div at all. z-index doesn't seem to work. I want to do this with a transparent PNG so that I can highlight certain divs on mouseover - the transparentness will allow the under stuff to still be seen a little.
Thanks!
z-index will only work if a position other than static (the default) is set on that element. Add position: relative; to the relevant element and z-index will work. Here is an example: http://jsfiddle.net/sl1dr/8gR6V/
Related
I have the following HTML structure:
<div>
<div class="expandable">
<div class="custom-select"><ul><li></li></ul></div>
</div>
</div>
<div>
<div class="expandable">
<div class="custom-select"><ul><li></li></ul></div>
</div>
</div>
<div>
<div class="choice-select">
<div class="custom-select"><ul><li></li></ul></div>
</div>
</div>
"expandable" divs are repeated.
"custom-select" divs become visible
on click.
"choice-select" is at the bottom of all expandable divs and
contains another select dropdown with a button
with the following styles:
.expandable {
position: relative;
z-index: 10;
}
.custom-select {
position: absolute;
z-index: 9999;
}
My problem is this:
The "custom-select" is used everywhere and has a very high z-index of 9999. Even if multiple of these are used in the same div, the clicked (expanded) one is still visible over the rest of the divs and selects as its in the same parent div.
I gave "expandable" div a z-index of 10 so that when the "custom-select" is clicked and it overlaps "choice-select", it is still visible and clickable.
However, since the "expandable" divs all have the same z-index and there can be N number of "expandable" divs, a "custom-select" when clicked and if it happens to expand into the sibling "expandable" div gets cut. Its hidden behind the content of the next "expandable" div.
What do I need to do to ensure that the "custom-select" is always visible? I also tried by giving "expandable" div an opacity of 0.99, but it didn't work. Any tips?
Somewhat indicative code: https://codepen.io/imgr8/pen/bzOrbY
I am going to answer my own question. I just added the z-index on the sibling parent only during hover. That solved it. Thank you for all your help!
I've got a layout with a left sidebar to the content. Sidebar is absolutely positioned, width 200px, and content has a margin-left of 200px. That's all dandy, but I just began animating the navigation, I would like it to slide in from underneath the content. See fiddle.
Problem is, the absolutely positioned sidebar is above the content, regardless of setting the z-indexes to 1 and 2, respectively.
Setting the sidebar's z-index to -1 has it slide in correctly, but places it underneath it's parent, making navigation unclickable.
fiddle
<div class="parent">
<aside class="animated fadeInRight">
... navigation ...
</aside>
<main>
... content ...
</main>
</div>
How do I have the sidebar slide in from underneath the content, but above the parent?
Aha! I've figured it out.
As per w3schools...
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
So simply adding position: relative to the <main> fixes it.
Updated fiddle
If you add position: relative; to your main box, the z-index css will be applied. The way you currently have it, the z-index is not working because it needs to have a position style added to it.
I have a number of divs with the same class, that I want to align vertically inside their container div.
The html part looks like this example:
<div id="container">
<div class="element">
........
</div>
<div class="element">
........
</div>
<div class="element">
........
</div>
</div>
I have floated the elements (divs with .element class) 'left' so they are all on one row. So far so good no problem yet.
The contents of the .element div vary. Now by default, they are aligned top, and I want to align them to the bottom using this css:
#container {position:relative;}
#container .element {position:absolute;bottom:0;}
Works and does align them to the bottom, but unfortunately it also sticks them together and they all look like they are in one place as one div, the one on top of the other.
Trying to set width, margin, padding etc.. to the .element div does nothing, they just act as one div.
What do I need to do to separate them ? I believe giving each div a separate class is not the right solution.
I also would not like to use table solutions, unless there is absolutely no other way.
I have tried vertical-align:bottom which for some reason does nothing.
I kept searching for long about this but nothing related comes up on the net, so if it's a duplicate I apologize.
Thanks in advance.
Well this is what the position:absolute is all about. I don't see why you use it.
If I understand right you want to vertical align the divs to the bottom and have them appear next to each other / beside each other ? Then most likely you have to modify the display css attribute of your divs to display:inline-block; or even use span tags instead.
You could wrap the #container div with another div, set its position to relative, and set the position of #container to absolute and it's bottom to bottom: 0
See my example
Using this really simple html / css (http://jsfiddle.net/XXzTj/)
<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>
The margin is spaced 12px all round correctly, but I was expecting the red background of the parent element to be shown in the top and bottom 12px spaces, instead its just 'blank space'.
Am I going mad or have I done something wrong?
try this --
<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>
http://jsfiddle.net/XXzTj/1/
The child div is forcing the parent div to be rendered offset from its surroundings because you are using the margin property. Since the parent div has no content the browser has no reason to apply styling above or below the child div.
In order to honour the margin properties of the child div, however, which does have content, the parent div is rendered with its background either side of the content.
To have the browser render it in the way I imagine you expect, you would need to apply the padding style. Again, that's because the parent div has no content. Padding forces its styles to be rendered within the area because padding essentially acts like space that content would fill up.
It's collapsing margins in action. Either use padding for parent element instead of margin for child one, or create new context by setting position: relative, overflow: auto/scroll/hidden, or add generated content (:before and :after pseudoelements) with display: block to parent element to prevent margin collapsing.
Not too sure why that isnt working to be honest but this does work:
<div style="background-color:red; padding:12px;">
<div style="background:blue;">hello</div>
</div>
Here there is the whole example of my divs.
Why doesn't footer get the background color from the parent (container)?
When you float an element, this is like it was disconnected from the parent. So, inherit values cannot be inherited. Also, the parent stops expanding to the children heights. Remove the float and you can see it working.
But if you really need the float, you need to put background-color on footer.
Remember that you can put another <div style="clear: both"></div> after footer like showed on another answer, but it is just a trick to that the parent can follow the child height.
You have to clear the floating div: http://jsfiddle.net/74MvW/14/
It doesn't get the bg color, because the "container" div has the background, but the "footer" div is floating to left, which means that it doesn't affect the "container" div's height.
You have to either get rid of the float or simply add a clearer div after the footer div like this:
<div class="container">
<div class="footer">
Hello
</div>
<div style="clear:both;float:none;"><!-- Clearer --></div>
</div>
As other answers have mentioned, the problem is the float value. The nicest way to get around this is to set the .footer div to "inherit" the parent's background:
.footer {width:910px; height:150px; float:left; background: inherit}
Demo.
Some CSS properties are inherited by default (e.g. font-family); others have default properties. In the case of background-color, the default is transparent. If you want the property to be inherited, you have to say so explicitly.