如果div在窗口大小調整時跨越其他div，則將div z-index從高到低更改爲？

我有一個叫做'開始按鈕'的Z-index比我的頁面上的圖片更高。如果div在窗口大小調整時跨越其他div，則將div z-index從高到低更改爲？

基本上，如果用戶將窗口寬度縮小到低於1024x768的任何值，那麼我希望在圖像下方設置「開始按鈕」的z-index，以便圖像出現在另一個div的頂部。

是否有一種使用CSS的jQuery的方式來說，如果窗口寬度低於1024x768那麼改變div的z-index？或者我可以使用類似css .start-button：width = 37.7％{來確定divs z-index應該何時更改。

<div class="start-button"></div> 
<div class="image"></div>

CSS的啓動按鈕：

.start-button{ 

    border: 1px solid #3f3f3f; 
    border-radius: 3px 3px 3px 3px; 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3); 
    color: #434343; 
    cursor: pointer; 
    display: block; 
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif; 
    margin-top: 15px; 
    margin-left:0px; 
    padding: 10px; 
    text-shadow: 0 -1px 0 #444444; 
    text-align:center; 
    width: 90px; 
    height:20px; 
    position:absolute; 
    z-index:150; 
    font-size:16px; 
    font-weight:400; 
    text-decoration:none; 
    background-color:#cccccc; 
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
    -khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
    background-color:#333333; 

    background-image: linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%); 
    background-image: -o-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%); 
    background-image: -moz-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%); 
    background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%); 
    background-image: -ms-linear-gradient(top, #f7f7f7 0%, #9f9f9f 100%); 
    overflow:hidden; 
}

圖像CSS：

.header_logo_place{ 
    width:100%; 
    height:525px; 
    float:left; 
    margin-left:4%; 
    background-image:url(../img/image_logo2013.png); 
     background-repeat:no-repeat; 
     background-position:bottom left; 
     position:relative; 
     margin-top:-1px; 
     z-index:230; 


}

來源

2013-10-09 jason derulo

您可以使用CSS媒體查詢此，無需使用Javascript/jQuery的：

@media (max-width: 1024px) and (max-height: 768px) { 
    .start-button { 
     z-index: 0; /* amend as required */ 
    } 
}

來源

2013-10-09 12:40:04

是的，但是@media之後你不需要'屏幕和'嗎？我一直都是這樣看的。 – fred02138

@ fred02138只有當你特別想要定位'屏幕'媒體。上面的一個是所有這些都可以在'print'和其他媒體類型上使用的。我會把它留給OP來根據需要進行修改。 –

你知道這是否適用於chrome，因爲它似乎不適合我？ –

如果div在窗口大小調整時跨越其他div，則將div z-index從高到低更改爲？

回答

相關問題