Two Absolute child divs inside relative parent div are hidden with overflow:hidden, expected to hover over eachother

Question

When I use float, childs pop out of parents.

I just put overflow:hidden on the parent and the child pops back into its parent.

However, I can't do the same with an absolute div and a relative div.

.parent {
  position: relative;
  overflow: hidden;
}
.child {
  position: absolute;
}

<div class="parent">
  <div class="child">First</div>
  <div class="child">Second</div>
</div>

The goal is to float 2 images one over another to create a slideshow, but still make the page respect the slideshow as an item.

Expected: "First" hovers above "Second" inside parent

Behavior: "First" and "second" are hidden, parent is 0px in height.

Upon removing overflow:hidden;, they appear outside the parent.

There is no more code. How does one float First over Second in a div? — Gala, Feb 13 '16 at 20:46
_“Upon removing overflow:hidden;, they appear outside the parent”_ – that is the effect floating has, floated elements do not affect the height of their parent any more. There are several ways to fix that – `overflow:hidden` is one of them, but floating the parent element itself, or making it `display:inline-block` also make it encapsulate floated children. — CBroe, Feb 13 '16 at 20:48
I'm not sure I understand the question, but it seems you need to use the clearfix http://stackoverflow.com/a/8554054/3397274 — jbmartinez, Feb 13 '16 at 21:08
Relative parents and absolute children will not leave any spacing inside the parent element. That's just how it works. If you want to keep the spacing inside the parent you will have to set a height to it, consider using `min-height` and `max-height`. — Err, Feb 13 '16 at 21:50

Steve Hartley · Answer 1 · 2016-02-13T22:34:03.377

Since you have only absolute div inside a relevant parent div there is effectively no content in the parent div. You can set a preferred height to the parent div but also need to set html and body height to 100%.

Note: You would likely set your parent div to the size of your images to be displayed

I have colored the parent black and the children red for visual point of view.

Is this what you are trying to achieve? Sorry if I have miss understood your question.

html, body {
 
 height:100%;
 width:100%;
}
.parent {
  position: relative;
  height:50%;
  width:50%;
  background-color:Black;
}
.child {
  position: absolute;
  background-color:red;
  width:20%;
  height:20%;
}

<div class="parent">
 <div class="child">First</div>
 <div class="child">Second</div>
</div>

Two Absolute child divs inside relative parent div are hidden with overflow:hidden, expected to hover over eachother

1 Answers1