CODEWITHSUNDEEP
htmlcssparent
zacharyliu
zacharyliu

Reputation: 26308

Show child element above parent element using CSS

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.

Upvotes: 29

Views: 74648

Answers (6)

fuzzy marmot
fuzzy marmot

Reputation: 413

You can set a negative margin for your parent element, offset by the padding - for example, margin-left: -100px; padding-left 100px. That will give you 100px to the left where the child can overlap and still be on top.

Upvotes: 0

resopollution
resopollution

Reputation: 20350

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;
}

Upvotes: 2

skybondsor
skybondsor

Reputation: 747

Similar to what Chacha said, you should give the parent a position of relative and the child a position of absolute, then give the child top: -100px.

Does the parent have overflow set to hidden? That might hinder your efforts.

Upvotes: 1

sixthgear
sixthgear

Reputation: 6460

Set overflow: visible; on the parent div.

#parent {
    overflow: visible;
}

Changed to reflect asker's update.

Upvotes: 58

Tyler Carter
Tyler Carter

Reputation: 61567

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;
}

Upvotes: 5

Nico Burns
Nico Burns

Reputation: 17099

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.

Upvotes: 1

Related Questions