title: CSS placeing inline elements on top of each other in a in a div
body: <p>I am developing the front end for one of my clubs in my school, and I am having problems placing two inline elements on top of each other. I have been stuck on this for a few nights and it is really upsetting me. I have tried everything from margin,positioning,inline-block, and all of it seems to give me one problem or the other. Right now I am at my wits end, so I am turning here. The  elements are suppose to be above the  elements. both elements are in the player  which is suppose to be next to the image. I will include the link to download my code, and where I am having the problem it pretty obvious once you see my page in a browser. Thanks for any help you can give me.</p>
  
  <p><a href="https://dl.dropbox.com/u/21141217/HvZ.zip" rel="nofollow">https://dl.dropbox.com/u/21141217/HvZ.zip</a></p>
  
  <p>Edit: I am having an issue here</p>
  
  <pre><code>&lt;div id="recentTags"&gt;
                  &lt;h4&gt;RECENT TAGS&lt;/h4&gt;
                  &lt;div class="tag"&gt;
                      &lt;div class="player"&gt;
                          &lt;a href=""&gt;Chris Stephenson&lt;/a&gt;
                          &lt;h6&gt;Legends&lt;/h6&gt;
                      &lt;/div&gt;
                      &lt;img src="tag.png" alt /&gt;
                      &lt;div class="player"&gt;
                          &lt;a href=""&gt;Eric Tadt&lt;/a&gt;
                          &lt;h6&gt;butt pirates&lt;/h6&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="tag"&gt;
                      &lt;div class="player"&gt;
                          &lt;a href=""&gt;Zack Baer&lt;/a&gt;
                          &lt;h6&gt;Little Bears&lt;/h6&gt;
                      &lt;/div&gt;
                      &lt;img src="tag.png" alt /&gt;
                      &lt;div class="player"&gt;
                          &lt;a href=""&gt;Humble Trumble&lt;/a&gt;
                          &lt;h6&gt;Glorious pres&lt;/h6&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Relevant CSS: </p>
  
  <pre><code>#recentTags{
  width: 292px;
  padding: 4px;
  height: 236px;
  /*My attempt at trying to recreate the color gradient. Gabe fix it*/
  /*I used http://www.colorzilla.com/gradient-editor/ or you can just google css gradient generator*/
  background: #5e5e5e; /* Old browsers */
  background: -moz-linear-gradient(top, #5e5e5e 0%, #000000 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e5e5e), color-stop(100%,#000000)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5e5e5e 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5e5e5e 0%,#000000 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #5e5e5e 0%,#000000 100%); /* IE10+ */
  background: linear-gradient(to bottom, #5e5e5e 0%,#000000 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  }
  #recentTags h4{
  color: #D23000;
  background-color: grey;
  padding-left: 8px;
  /*Color gradient*/
  background: #2d2d2d;
  background: -moz-linear-gradient(left,  #2d2d2d 0%, #4c4c4c 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2d2d2d), color-stop(100%,#4c4c4c));
  background: -webkit-linear-gradient(left,  #2d2d2d 0%,#4c4c4c 100%);
  background: -o-linear-gradient(left,  #2d2d2d 0%,#4c4c4c 100%);
  background: -ms-linear-gradient(left,  #2d2d2d 0%,#4c4c4c 100%);
  background: linear-gradient(to right,  #2d2d2d 0%,#4c4c4c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#4c4c4c',GradientType=1 );
  }
  .tag{
  width: 280px;
  height: 31px;
  margin-top: 5px;
  padding:3px;
  border: 0px solid #829485;
  border-radius: 10px; 
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px;
  /*Gradient*/
  background: rgb(30,87,153);
  background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(255,255,255,1) 0%, rgba(53,53,53,1) 2%, rgba(73,73,73,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(0%,rgba(255,255,255,1)), color-stop(2%,rgba(53,53,53,1)), color-stop(100%,rgba(73,73,73,1)));
  background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(255,255,255,1) 0%,rgba(53,53,53,1) 2%,rgba(73,73,73,1) 100%);
  background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(255,255,255,1) 0%,rgba(53,53,53,1) 2%,rgba(73,73,73,1) 100%);
  background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(255,255,255,1) 0%,rgba(53,53,53,1) 2%,rgba(73,73,73,1) 100%);
  background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(255,255,255,1) 0%,rgba(53,53,53,1) 2%,rgba(73,73,73,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#494949',GradientType=0 );
  }
  .tag a{
  color: #D23000;
  display: inline-block;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  position: relative;
  bottom: 14px;
  }
  .player{
  width:110px;
  display: inline;
  }
  .tag img{position: relative;}
  .tag h6{
  display: inline;
  }
  </code></pre>
  
  <p>dabblet link: <a href="http://result.dabblet.com/gist/4007549/381ecd27edf3c72fbde28575ca9cd2e50e2c2a52" rel="nofollow">http://result.dabblet.com/gist/4007549/381ecd27edf3c72fbde28575ca9cd2e50e2c2a52</a></p>
  
  <p>EDIT: I guess I choosed the wrong choice of words I want to place the  elements above the  elements. So the end result will look like this:</p>
  
  <p>Chris Stephenson
    Legends</p>