Positioning absolute div in fixed container

Question

I am trying to make my logo stay fixed on my header. I dont want it to go past the home tab when the screen size is adjusted. How can I do this?

<div class="header_menu">
    <div class="main_top">
        <div class="wrap">
            <div class="wrapper"> 
                <div class="cssmenu"><div class="headerlogo_tag"><img src="http://fc07.deviantart.net/fs71/f/2014/112/5/6/logo_by_destinyjade-d7fmi7c.png" width="174" height="174" alt=""></div>
                  <ul>
                       <li class="active"><a href="index.html"><span>Home</span></a></li>
                          <li><a href="about.html"><span>About</span></a></li>      
                       <li class="last"><a href="news.html"><span>News</span></a></li>
                       <li class="last"><a href="team.html"><span>Team</span></a></li>
                       <li class="last"><a href="schedule.html">Schedule</a></li>
                       <li class="last"><a href="contact.html"><span>Contact</span></a></li>
                  </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.headerlogo_container {
    position: absolute;
    left: 55px;
    top: -10px;
    z-index: 1000;
}

.headerlogo_tag {
     float: left;
     position: absolute;
     left: 255px;
     top: -10px;
     z-index: 1000;
}

.header_menu {
    background: #000000;
    background-image: url(http://fc06.deviantart.net/fs70/f/2014/112/b/a/header_bg_by_destinyjade-d7flhv4.png);
    background-repeat: repeat-x, repeat;
    position:fixed;
    width:100%;
    z-index: 999;
}

Answer 1

.headerlogo_tag { position: absolute }

Get rid of that. You do not need position absolute. You do not want position absolute. Position absolute is not to be misused like this. What did it ever do to you? :(

Seriously, if unless you want an absolutely positioned element, don't use one. And you almost never need an absolute element, since DOM is based off of HTML (v2) which is based on free-flowing text.

Answer 2

Add position:relative; to your .wrap.

Then your .headerlogo_tag will stay in an absolute position relative to .wrap.

.wrap{
  margin:0 auto;
  width:80%;
  position: relative;
}
.headerlogo_tag {
  position: absolute;
  left: 55px;
  top: -10px;
  z-index: 1000;
}

You might want to experiment with the positioning a little bit more but that's the idea.