问题描述
我正在努力解决转换后的 div 与引导导航栏重叠的问题，如下图所示。有谁知道为什么会发生这种情况？
它在 safari 中发生，但在 Firefox 或 Chrome 中不。当没有对 div 应用任何变换时，也不会发生这种情况。
我正在使用 bootstrap 4 和 tailwind.css。我已经包含了下面的代码。谢谢。
感谢您的指点，谢谢。
<head>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<nav class="navbar w-100 navbar-expand-md navbar-light bg-warning fixed-top " style="background-color: #eee;">
<a class="navbar-brand" href="">
logo
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav w-100">
<a href="" class="effect3 nav-item nav-link">nav item</a>
</div>
</div>
</nav>
<br><br><br><br><br><br><br><br>
<body>
<div class="column p-0 place-self-center">
<div class="card bg-transparent border-0 ">
<div class="w-50 border-2 border-yellow-400 rounded-t-lg rounded-b-lg h-96 bg-dark pb-0" style="transform: perspective(150rem) rotateY(-25deg); Box-shadow: 10px 10px 40px #888888;"></div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
解决方法
你能看看下面的代码链接吗？希望它对你有用。您必须在父元素 position 及其子元素 z-index 中添加 .place-self-center 和 .place-self-center .bg-transparent。