z-index và vấn đề iframe - trình đơn thả xuống

Question

Xin chào. Có một vấn đề khá khó hiểu với các menu thả xuống và khung nội tuyến của tôi.

Tôi đã áp dụng chỉ mục z 1000 cho menu thả xuống, tuy nhiên iframe chứa video youtube vẫn xuất hiện phía trên menu. Xem cho chính mình bên dưới (đánh dấu vào menu 'shortcodes'):

http://www.matthewruddy.com/demo/?page_id=765

Tôi không thể hiểu tại sao đây là. Ai có thể giúp tôi không? Đây là CSS nếu nó giúp:

#jquery-dropdown { 
position: absolute; 
bottom: 0; 
right: 10px; 
} 

#jquery-dropdown ul { 
margin: 0; 
padding: 0; 
list-style: none; 
} 

#jquery-dropdown ul li { 
margin: 0; 
padding: 15px 10px 15px 10px; 
position: relative; 
float: left; 
} 

#jquery-dropdown ul li a { 
display: block; 
text-decoration: none; 
font-weight: bold; 
font-size: 13px; 
color: #707070; 
outline: none; 
} 

#jquery-dropdown ul li ul { 
position: absolute; 
left: -10px; 
top: 46px; 
display: none; 
background: #f4f4f4; 
border: 1px solid #e1e1e1; 
border-top: none; 
z-index: 1000; 
padding: 5px 0; 
-moz-box-shadow: 1px 2px 3px #a4a4a4; 
-webkit-box-shadow: 1px 2px 3px #a4a4a4; 
box-shadow: 1px 2px 3px #a4a4a4; 
} 

#jquery-dropdown ul li ul li { 
margin: 0; 
padding: 0; 
float: none; 
position: relative; 
z-index: 1000; 
} 

#jquery-dropdown ul li ul li a { 
width: 180px; 
padding: 10px; 
z-index: 1000; 
} 

#jquery-dropdown ul li ul li a:hover { 
background: #e0e0e0; 
} 

Answer 1

tôi sẽ sử dụng nhúng của youtube video sử dụng thẻ <object> và không Iframe. Sau đó, tôi sẽ sử dụng <param name="wmode" value="transparent"> bên trong <object>. Một cái gì đó như thế này:

<object width="640" height="385"><param name="wmode" value="transparent"></param><param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object> 

Here is some more info

Answer 2

Trên máy của tôi (Chrome trên Windows 7) plugin hiển thị video YouTube là một cửa sổ gốc khác với cửa sổ nội dung trình duyệt. Tôi nghĩ rằng khi một plugin chạy theo cách này, nó sẽ hiển thị trên đầu bất kỳ nội dung nào khác trong trình duyệt, bỏ qua các giá trị chỉ mục CSS z.

Plugin Silverlight có cài đặt để làm cho nó chạy trong cửa sổ nội dung trình duyệt thay vì cửa sổ gốc của chính nó. Bạn có thể thử tìm một cài đặt tương tự cho trình phát YouTube được nhúng.

Answer 3

Flash không phải lúc nào cũng hoạt động tốt với chỉ mục z trên tất cả các trình duyệt, trông ổn từ firefox của tôi. http://manisheriar.com/blog/flash_objects_and_z_index < < Tôi nghĩ rằng đó có thể là giải pháp mà bạn đang tìm kiếm.

Sửa

Why doesn't Z-Index in IE render the way it's supposed to over a Flash Movie? < < vấn đề tương tự ở đây trên stackoverflow

Answer 4

Nếu bạn muốn tiếp tục sử dụng phương pháp iframe nhúng vids Youtube, bạn chỉ có thể thiết lập các wmode qua biến truy vấn ?wmode=transparent. Dưới đây là một ví dụ:

<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M" frameborder="0" allowfullscreen></iframe> 

Sẽ trở thành:

<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M?wmode=transparent" frameborder="0" allowfullscreen></iframe> 

Nhớ kiểm tra URL Youtube cho bất kỳ biến truy vấn đã hiện diện. Nếu đã có ?something..., hãy thay đổi ?wmode=transparent thành &wmode=transparent và kết thúc nó.

Answer 5

Nếu? Wmode = transparent không hoạt động, thay vào đó hãy thử chuyển sang mờ. Điều đó làm việc trong trường hợp của tôi.

mẫu:?

(function ($) { 
    $ = jQuery; 

    $(function() { 
     $video = $("#SomeWrapper> iframe"); 
     $srcVal = $video.attr('src'); 
     appendedVal = $srcVal + "?wmode=opaque"; 
     $video.attr('src',appendedVal); 
    }); 
})(jQuery); 

Answer 6

Đó là một vấn đề không phải là một iframe z-index .Same vấn đề tôi phải đối mặt với tôi chỉ cần thêm wmode = trong suốt đối với YouTube nhúng i frame url src. Giống như vậy:

<div class="tube_box"> 
      <iframe width="500" height="300" src="https://www.youtube.com/embed/ngKxlkoZBLA**?wmode=transparent**" frameborder="0" allowfullscreen ></iframe> 
    </div> 

It Works in all browser IE,Firefox and chrome 

Here My Css : 


.tube_box{ 
    float:left; 
    width:515px; 
    border:5px groove #d1e7ed; 
    border-radius:11px; 
    margin-bottom:10px; 
    color:#b8b8bf; 
    padding:10px; 
    z-index: 1000 ; 

} 


If you add the position:relative,absolute or anything again the drop down hiding.So avoid position its better.Another thing is not important to add the z-index,Without z-index also it will work .Hope so it will really helpful for you