CSS Overflow prevent child inheriting

Question

I have an issue where I want to display a header in the top left of a DIV. If I set the parent to relative and the inner div to absolute I can then position it so the backgroundimage goes top right so it looks like this:

http://www.landingapollo.com/random/stackover1.png

That works correctly. However, in another instance it is not working correctly because the parent container has its overflow set to hidden. It thus displays like this:

http://www.landingapollo.com/random/stackover2.png

Relevant code:

This is the main container

.container {
overflow: hidden;
position: relative;
float: right;
width: 650px;
margin-left: 5px;
margin-right: 7px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

This is the title background

#pinnedthree_title {
position: absolute;
width: 200px;
height: 30px;
background: url('images/headers/latestnewsheader.png') no-repeat left;
z-index: 100000;
top: -20px;
}

Answer 1

If you give the parent container the correct height it will show your content even though you are using overflow: hidden;

An absolute element will not push a relative element to the correct size.

Basically if your relative container was holding only your absolute container then it would have a height of 0 because it doesn't contain anything that will increase its height.

Because of this when you use overflow: hidden; it will hide anything that goes past the height of the relative container (In my example 0)

So try giving your relative container the correct height and see if that works.

Answer 2

I think You will need another div to achieve the effect that you want.

<div class="floater">
  <div class="container">...</div>
  <div id="pinnedthree_title">...</div>
</div>

.floater {
  overflow: visible
  position: relative;
  float: right;
  width: 650px;
  margin-left: 5px;
  margin-right: 7px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

.container {
  overflow: hidden;
  position: absolute
  width: 650px;
}

#pinnedthree_title {
  position: absolute;
  width: 200px;
  height: 30px;
  background: url('images/headers/latestnewsheader.png') no-repeat left;
  z-index: 100000;
  top: -20px;
 }