CSS Overflow prevent child inheriting

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-bord开发者_StackOverflow社区er-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;
}

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.

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