css div無法遮蓋select解決方案

來源:互聯網
上載者:User

那麼如何解決這個bug呢,解決該bug的方法如下:

1、將select放到iframe裡面,div 無法覆蓋select,但是iframe 可以覆蓋select,而div可以覆蓋iframe,所以解決辦法就是用Z軸高度更高的Iframe元素,包裹或覆蓋住下拉式清單方塊控制項,使其回到正常的Z軸高度上來,但每個select都加太煩了,不推薦

2、在需要遮蓋select的那個div放入一個空的iframe,這樣就可以針對性的解決問題了,簡單,值得推薦

下面就第2種方法貼出css教程代碼如下:

 

<STYLE type=text/css>

#pop{

width: 300px;

height:100px;

padding:10px;

position:absolute;

top:0;

border:1px solid blue;

background-color:#6666CC;

filter:alpha(opacity=70);

opacity:0.6;

}

#sect{

width:400px;

margin-top:60px

}

#pop iframe{

display:none;

display:block;

position:absolute;

top:0;

left:0;

z-index:-1;

width:3000px;

height:3000px;

}

</STYLE>


html代碼如下:

<DIV id=pop>這個是絕對位置的div,看看它有沒有把select遮住<IFRAME></IFRAME></DIV>
<SELECT id=sect> <OPTION value=1 selected>我是select,你能把我遮住嗎</OPTION> <OPTION value=2>我是select,你能把我遮住嗎</OPTION></SELECT>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.