Question

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

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

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

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

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

这是我的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;的每个元素都将位于包装器旁边，而不是浏览器窗口。因此，您可以在下拉列表中使用position: absolute;，并且对相对元素没有任何问题，这会对其他元素产生影响。

E.g：

.main_header_content {
    position: relative;
}

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

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

1 个答案: