Question

我将vimeo视频嵌入到网站中，并使其成功响应。导航栏停留在屏幕顶部（位置：固定;）并且是透明的（不透明度：0.8）。问题是，当我向下滚动时，嵌入的视频不在导航栏的层下，而是在顶部。如果我在＆＃34; .vimeo-wrapper iframe上使用z-index {z-index：-1; }＆＃34;然后它看起来很完美，但我无法播放视频。（见图）

问题：如何在确保播放器功能的同时在导航栏下进行设置？（见图）

没有z-index - 播放器有效但导航栏上没有重叠：

使用z-index - 播放器不起作用但在导航栏上重叠：

HTML - 嵌入式Vimeo视频

<div id="container-block">
  <div class="vimeo-wrapper">
    <iframe src="https://player.vimeo.com/video/159434479" width="1600" 
    height="900" frameborder="0" webkitallowfullscreen 
    mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

CSS - 嵌入式Vimeo视频

#container-block {
  position: relative;
  width: 100%;
  max-width: 570px;  /* 16:9 ratio */
  max-height: 320.625px; /* 570 / 16 * 9 */
  display: block;
  margin: 80px auto 70px auto;
}

.vimeo-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.vimeo-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML - 导航

<nav>
  <ul>
    <% if logged_in? %>
      <li><%= link_to "IOAKA", dashboard_path, :class => "logo" %></li>

      <% flash.each do |message_type, message| %>
        <div id="<%= message_type %>">
          <div class="flash"><%=message %></div>
        </div>
      <% end %>

      <div class="icon">
        <li><%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon", 
        :id => "ioaka_icon2"), dashboard_path) %></li>
        <li><%= link_to(image_tag("icon_settings.png", 
        alt: "geometry settings icon", :id => "settings_icon"), 
        edit_user_path(current_user)) %></li>
        <li><%= link_to(image_tag("icon_logout.png", alt: "geometry logout icon",
        :id => "logout_icon"), logout_path, method: "delete") %></li>
      </div>

    <% else %>
      <li><%= link_to "IOAKA", root_path, :class => "logo" %></li>

      <li>
      <% flash.each do |message_type, message| %>
        <div id="<%= message_type %>">
          <div class="flash"><%=message %></div>
        </div>
      <% end %>
      </li>

      <div class="icon">
        <li><%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon", 
        :id => "ioaka_icon1"), root_path) %></li>
        <li><%= link_to(image_tag("icon_signup.png", 
        alt: "geometry signup icon", :id => "signup_icon"), signup_path) %></li>
        <li><%= link_to(image_tag("icon_login.png", alt: "geometry login icon", 
        :id => "login_icon"), login_path) %></li>
      </div>
    <% end %>
  </ul>
</nav>

CSS - 导航

ul {
  list-style-type: none; 
  margin: 0 auto; 
  padding: 0 23px; 
  text-align: center; 
  max-width: 1920px;
}

li {
  display: inline;
}

a:link {
  text-decoration: none;
}

a:active {
  color: #fc5354;
}

nav {
  width: 100%;
  height: 66px;
  line-height: 56px; 
  background-color: white;
  border-bottom: #cfcfcf 3px solid;
  position: fixed; 
  opacity: 0.80;
}

.logo {
  float: left;
  font-family: cocomat_light-trial, sans-serif;
  color: #009fe3;
  font-size: 32px;
}

.icon {
  float: right;
  width: 200px;
}

#ioaka_icon1 {
  height: 48px;
  padding-top: 9px; 
  padding-right: 35px; 
}

#ioaka_icon2 {
  height: 48px;
  padding-top: 9px; 
  padding-right: 35px; 
  vertical-align: top;
}

#settings_icon {
  height: 42px;
  padding-top: 12px; 
  padding-right: 32px; 
  vertical-align: top; 
}

#logout_icon {
  height: 50px;
  padding-top: 8px;
}

#signup_icon {
  height: 42px;
  padding-top: 11px; 
  padding-right: 32px; 
  vertical-align: top;
}

#login_icon {
  height: 48px;
  padding-top: 9px; 
}

如何在rails中的嵌入式vimeo-video上设置z-index？

0 个答案: