Question

是否可以在每个单独的其他元素以及全屏（来自视频标签/ iframe）上强制使用元素（比如说div）。

目前我正在尝试：

位置：绝对
z-index：2147483647

但它似乎没有超越全屏。（在Chrome上测试 - 61.0.3163.100）

为什么我要这样做？我希望在全屏显示一种通知，所以当他们在网站上观看嵌入YouTube视频时，我可以向他们显示他们通常不会看到的通知，并且可能会在全屏时错过。

自从最近发布的Chrome以来，这似乎发生了变化，因为其他SO答案继续提出我上面尝试过的建议，并且它已经为他们工作了。看似铬改变了一些阻止它工作的东西。
实际上似乎是因为我试图使用Angular Material组件进行此操作，并且出于某种原因，某些事情不允许这种情况发生。

检查后，似乎chrome甚至没有改变与z-index有关的任何内容：-webkit-full-screen yes在全屏项目和/或div上设置z-index，不会工作。

最小，完整和可验证的例子： <击> https://jsfiddle.net/ea3rbmo4/

更新：https://jsfiddle.net/bw2ytwwb/ 这个显示你到底错了什么，红色div在前面，但是md-toast没有。

<html ng-app="app">
<head>

    <!-- AngularJS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-messages.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-cookies.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>

    <style>
    md-toast {
        z-index: 2147483647!important;
        position: absolute!important;
    }
    </style>

    <!-- Angular Controllers -->
    <script>
      var app = angular.module('app', ['ngMaterial', 'ngAnimate']);
      app.controller('body', ['$scope', '$mdToast', function($scope, $mdToast) {
        $mdToast.show(
          $mdToast.simple()
          .textContent("Test123")
          .position('top right')
          .hideDelay(999999)
        );
      }]);
    </script>

</head>

<body ng-controller="body" layout="column" layout-align="center center" layout-fill style="background:#22282b">
    <video controls="" autoplay="" name="media" type="video/mp4" src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
</body>
</html>

强制元素位于每个其他元素的顶部（即使是全屏模式）

0 个答案: