使用 position:relative 在网站内容上方定位 Div

Question

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

我尝试过对下拉菜单使用绝对位置和相对位置，但是它们都有问题。

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

我也试过使用相对定位和float:right；这非常有效，因为下拉列表包含在内部包装器中。然而，问题是所有网站内容都被推到了一边。请查看随附的屏幕截图，（之前红线代表网站包装纸的边缘。屏幕截图：http://imgur.com/AHs8Y9c 我尝试使用 z-index:1000；但是这没有做任何事情。

如果可能的话，我更愿意使用 position:reliative 选项，它看起来比使用 position:absolute 摆弄像素和百分比要简洁得多；

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

提前感谢您的帮助。

Answer 1

给包装器 position: relative;。包装器内带有 position: absolute; 的每个元素将被定位在包装器旁边，而不是浏览器 window 了。因此，您可以在下拉列表中使用 position: absolute; 并且对相关元素没有问题，这对其他元素有影响。

例如：

.main_header_content {
    position: relative;
}

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

使用 position:relative 在网站内容上方定位 Div

Positioning a Div above website content, using position:relative

html

css

drop-down-menu