Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show child element above parent element using CSS

Tags:

html

css

parent

I have two divs, one nested inside of the other. The parent element has a defined width/height. How can I show the child div above the parent (outside of it) using only CSS?

EDIT: Sorry, maybe I should clarify that I mean "above" as along the z axis. And yes, I already tried z-index. My problem is that when the child element is larger than the parent, it results in a "frame" or "window" effect, cutting off part of the div.

like image 472
zacharyliu Avatar asked Jul 23 '09 22:07

zacharyliu


People also ask

Can child Z-index be higher than parent?

This is impossible as a child's z-index is set to the same stacking index as its parent.

How do I apply CSS to child element based on parent?

It's easy to apply style to a child element, but if you want to apply style to a parent class that already has child elements, you can use the CSS selector child combinators (>), which are placed between two CSS selectors.

How do you override Z-index?

Solution: Move the modal outside of the content parent, and into the main stacking context of the page. Now, the modal element is a sibling element to the two others. This puts all three elements in the same stacking context as them, so each of their z-index levels will now affect one another.


4 Answers

Set overflow: visible; on the parent div.

#parent {
    overflow: visible;
}

Changed to reflect asker's update.

like image 94
sixthgear Avatar answered Oct 13 '22 06:10

sixthgear


You could use the position definition to position it either relatively or absolutely on the page. IE:

To show it directly above you would replace 100px in this statement with the size of the child box.

.child{
    position: relative;
    top: -100px;
}
like image 30
Tyler Carter Avatar answered Oct 13 '22 04:10

Tyler Carter


Do it this way:

.child { 
position: absolute; 
margin: -100px;
}

Using position: absolute will get rid of the empty space left by the child when it gets shifted up.

Edit - after reading your update: position:absolute still applies for this situation too. It gets the child out of the parent. Then you use the margins to position it how you want.

This way you can make the child bigger than the parent and above it.

.parent{
height: 50px;
width: 50px;
}
.child {
position: absolute;
height: 100px;
width: 100px;
margin: -75px 0 0 -75px;
}
like image 2
resopollution Avatar answered Oct 13 '22 04:10

resopollution


If you're sure you need to do this, then try putting

margin-top: -100px; on the child element or however many px is needed to make it appear above.

like image 1
Nico Burns Avatar answered Oct 13 '22 04:10

Nico Burns