使用position：relative定位Div在网站内容之上

我试图在我的网站的右上角放置一个下拉菜单选择框，但我有定位问题 . 我希望这个下拉框位于网站其余部分的顶部，而不是仅仅将其所有内容都推到一边 .

我试图在下拉列表中同时使用绝对位置和相对位置，但两者都存在问题 .

位置问题：绝对;和右：0;是下拉到网站的最右边但是下拉必须在网站内部包装器内，宽度为1140px . 请参阅屏幕截图，因为您可以看到下拉列表超过了代表网站内部内容包装器边缘的红线 . 我试图通过使用右：200px或百分比来解决这个问题，但它永远不会正常工作，因为在其他显示器和分辨率上测试时，下拉列表出现在所有不同的地方 . 这是屏幕截图：http://imgur.com/PLIegM7

我也试过使用相对定位和浮动：对;这很有效，因为下拉列表包含在内部包装器中 . 但问题是所有网站内容都被推倒了 . 请看附加的屏幕截图（如前红线代表网站封面上的边缘 . 屏幕截图：http://imgur.com/AHs8Y9c我尝试过使用z-index：1000;但是这没有做任何事情 .

我更倾向于使用这个位置：如果可能的话，相关的选项，它似乎比玩像素和位置的绝对更加整洁：绝对;

这是我的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>

这是我的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 a {
    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;
}

感谢您提前提供的任何帮助 .