html - Positioning a Div above website content, using position:relative -

im trying position drop down menu selection box in top right hand side of website, having problem positioning. want drop down box on top of rest of website rather pushing of content out of way.

i have tried use both position absolute , relative positioning dropdown both have problems.

problem position:absolute; , right:0; drop down goes far right of website drop down has within website internal wrapper 1140px wide. please see screenshot, can see dropdown goes past red line represents edge of website internal content wrapper. have tried solve using right:200px or percentage never work because when tested on other monitors , resolutions dropdown appears in different places. here screen shot: http://imgur.com/pliegm7

i tried using relative positioning , float:right; works quite because dropdown contained within internal wrapper. problem of websites content pushed down out of way. please see screen shot attached, (as before red line represents edge on website wrapper. screen shot: http://imgur.com/ahs8y9c have tried using z-index:1000; did not anything.

i prefer go position:reliative option if possible, seems lot neater playing around pixels , persentages position:absolute;

here html:

<div id="main_header">         <div class="main_header_content">             <div id="main_header_logo">                 <a href="pages/#.php"><span class="helper"></span><img class="logo" src="images/navigation/logo.png" width="250"></img></a>             </div>             <div id="main_header_links_wrapper">                 <div id="main_header_links">                     <ul>                         <label for="touch"><span class="main_header_link_categories">categories</span></label><img class="header_link_icon" src="images/navigation/arrow_bottom.png" width="12"></img>                         <a href="pages/#.php"><li class="header_link_padding">newest</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img></a>                         <a href="pages/#.php"><li class="header_link_padding">top 100</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img></a>                     </ul>                 </div>             </div>              <input type="checkbox" id="touch">              <div class="slide">                 <div class="slide_wrapper">                     test                 </div>             </div>           </div>     </div> 

here css:

#main_header_links_wrapper {     display:inline-block;     float:right;     height:64px; } #main_header_links {     display:inline-block; } #main_header_links ul {     list-style-type: none;     margin: 0;     padding: 0;     line-height:64px; }  #main_header_links li {     display: inline;     font-family: 'roboto', sans-serif;       font-size:18px;     font-weight: 300;     color:#fff;     cursor:pointer;  }  #main_header_links {     text-decoration:none; } #main_header_links a:hover {     text-decoration:underline; } .header_link_icon {     padding-left:5px; } .header_link_padding {     padding-left:25px; } .main_header_link_categories {     font-family: 'roboto', sans-serif;       font-size:18px;     font-weight: 300;     color:#fff;     cursor:pointer; }  .slide {   clear:both;   height:0px;   overflow: hidden;   width:1140px;   margin:0 auto; }    #touch {position: absolute; opacity: 0; height: 0px;}      #touch:checked + .slide {     height: 500px;     width:450px;     border:1px solid black;     float:right;     position:relative;     background-color:gray; } 

thank in advance.

give wrapper position: relative;. every element position: absolute; inside wrapper positioned alongside wrapper , not browser window anymore. can use position: absolute; on dropdown , have no problem relative element, has effect other elements.

e.g.:

.main_header_content {     position: relative; }  .slide {     position: absolute;     right: 0; }