將下拉菜單保留在其他元素的頂部

我有一個下拉菜單來更改語言，但是當列表變長並且菜單現在位於其他元素的後面時。將下拉菜單保留在其他元素的頂部

我真的不知道需要更改什麼，或者我必須應用什麼CSS才能讓下拉菜單保留在其他元素的頂部，以便他們仍然可以看到列表並選擇它們。

enter image description here

我試圖讓大多數應用到元素的CSS的，但他們是「少」

這些都是他們的

li.lang-picker:first-child { 
    border-right: none; 
} 
.ui-append.ui-select { 
    background-color: white; 
} 
#lang-picker { 
    margin: -7px 15px 0 -18px; 
    border-color: transparent; 
} 
#lang-picker:hover { 
    border-color: #CCC; 
} 
#lang-picker ul { 
    background: white; 
    display: inline-block; 
} 
#lang-picker ul li { 
    display: block; 
} 
#lang-picker .ui-select-menu { 
    width: auto; 
    border-color: #CCC; 
} 
#lang-picker .ui-select-menu ul { 
    width: auto; 
} 
#lang-picker .ui-selected::before { 
    margin-right: 5px; 
} 
#lang-picker .ui-smedium { 
    width: auto; 
} 
#lang-picker > .icon { 
    background: none; 
    color: #555; 
    padding: 0 10px 0 0; 
} 
#lang-picker > .icon:hover { 
    background: none; 
    color: #555; 
} 
/********************************************************* 
* Filter 
*/ 
.gallery-header .header { 
    float: left; 
    padding-bottom: 10px; 
    font-family: 'Open Sans Light', sans-serif; 
    -webkit-font-smoothing: antialiased; 
    margin-right: 20px; 
} 
.gallery-header .header h1, 
.gallery-header .header p { 
    display: inline; 
    margin-right: 10px; 
    font-weight: normal; 
    letter-spacing: -0.25px; 
} 
.gallery-header .header h1 { 
    font-size: 2.4em; 
    line-height: 16px; 
    color: #3fb58e; 
} 
.gallery-header .header p { 
    font-size: 1.4em; 
    color: #555555; 
} 
.gallery-header .header p a { 
    color: #20abdc; 
    text-decoration: none; 
} 
.gallery-header .header p a:hover { 
    text-decoration: underline; 
    color: #4abce5; 
} 
#tools h1 { 
    line-height: 1.4em; 
} 
.filter { 
    position: relative; 
    background: #3fb58e; 
    float: right; 
    z-index: 3; 
    padding: 0.5em 1em 1em; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.filter label { 
    color: #FFF; 
    line-height: 1.6; 
} 
.filter #search-filter { 
    border-color: #38a27f; 
} 
.filter #search-filter:hover { 
    border-color: #2b7c61; 
} 
.filter #search-filter .icon { 
    background: #328f70; 
} 
.filter #search-filter .ui-select-menu { 
    border-color: #3fb58e; 
} 
.filter:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-top: 10px solid #3fb58e; 
    margin-left: -10px; 
}

來源

2013-10-08 Ali

您很可能需要更改z-index。請在這裏發佈您的HTML和CSS。 – j08691

我將獲取可以更新的CSS和HTML。 – Ali

可能的重複[如何讓此下拉列表位於其他元素之上]（http://stackoverflow.com/questions/12526631/how-do-i-get-this-dropdown-to-be-on -top-of-the-other-elements） – adam

給Z-部分指數：100以上嘗試給予更多。

div.ui-select-menu 
{ 
    z-index:100; 
}

來源

2013-10-08 16:23:15 Kishori

你在這裏做假設。你不知道一個100的z-index是否足以完成OP所需要的，但更重要的是，除非元素已經被定位，否則z-index規則本身不會做任何事情。 – j08691

您可以將'z-index'屬性和'position'屬性一起使用。爲了使'z-index'起作用，位置應該設置爲'相對'。

來源

2013-10-08 16:23:34

它確實工作@mikeGordo，但不是它假設的方式我猜https://dl.dropboxusercontent.com/spa/n5v3bx9nnjkdpzf/_dv2hfnv.png – Ali

@Ali不知道我在看什麼。它應該如何？ –

對不起，這是一個更好的圖片？ https://dl.dropboxusercontent.com/spa/n5v3bx9nnjkdpzf/u-oyrnu9.png它不應該離開菜單本身。 – Ali

首先，您需要將position屬性設置爲非static。如果頁面中只有static（默認值）元素，則會設置position: relative;。但是，如果有元素的position不是static，那麼您需要將z-index屬性設置爲高於其他元素的值z-index。

來源

2013-10-08 16:26:42 OdraEncoded

將下拉菜單保留在其他元素的頂部

回答

相關問題