张老师总结的，感谢！
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 .test1-wrap,.test2-wrap{
8 border: 1px dashed #000;
9 margin-bottom: 20px;
10 }
11 /* 解决办法一 */
12 .test1-wrap .overflow{
13 overflow: hidden;
14 }
15 .test1-wrap .test1-top{
16 position: absolute;
17 width: 200px;
18 height: 50px;
19 background-color: green;
20 z-index: 999;
21
22 /* 解决办法二 */
23 /* transform: translateZ(100px); */
24 }
25 .test1-wrap .test1-bot{
26 width: 100px;
27 height: 100px;
28 background-color: red;
29 transform: perspective(300px) rotateY(40deg);
30 }
31
32 .test2-top{
33 width: 100px;
34 height: 100px;
35 background-color: red;
36 /* 照理说这个会在下面，可是加了这句话就会跑上来了 */
37 transform: scale(1);
38 }
39 .test2-bot{
40 margin-top: -50px;
41 width: 100px;
42 height: 100px;
43 background-color: green;
44 }
45
46 .test3-top{
47 width: 100px;
48 height: 100px;
49 position: fixed;
50 top: 300px;
51 right: 0;
52 background-color: #000;
53 }
54 .test4-wrap{
55 width: 100px;
56 height: 100px;
57 border: 10px solid #000;
58 overflow: hidden;
59 margin-bottom: 100px;
60 }
61 .test4-top{
62 width: 150px;
63 height: 150px;
64 background-color: green;
65 position: absolute;
66 }
67 .test5-wrap{
68 width: 200px;
69 height: 200px;
70 border: 1px solid #333;
71 transform: scale(1);
72 }
73 .test5-top{
74 position: absolute;
75 width: 100%;
76 height: 100%;
77 background-color: red;
78 }
79 </style>
80 </head>
81 <body style="height: 1000px;">
82 <!-- Safari 3D变化后忽略层级 -->
83 <div class="test1-wrap">
84 <div class="test1-top"></div>
85 <div class="overflow">
86 <div class="test1-bot"></div>
87 </div>
88 </div>
89 <!-- 提升元素的垂直地位 -->
90 <div class="test2-wrap">
91 <div class="test2-top"></div>
92 <div class="test2-bot"></div>
93 </div>
94 <!-- position:fixed变absolute -->
95 <div class="test3-wrap" style="transform: scale(1);">
96 <div class="test3-top"></div>
97 </div>
98 <!-- 正常是不会隐藏的 -->
99 <div class="test4-wrap">
100 <div class="test4-top"></div>
101 </div>
102 <!-- Chrome/Opera不行 -->
103 <div class="test4-wrap" style="transform:scale(1);">
104 <div class="test4-top"></div>
105 </div>
106 <!-- 都行 -->
107 <div class="test4-wrap">
108 <div style="transform:scale(1);">
109 <div class="test4-top"></div>
110 </div>
111 </div>
112 <!-- 对定位的影响 -->
113 <div class="test5-wrap">
114 <div class="test5-top">dsfsdfsdf</div>
115 </div>
116 </body>
117 </html>
时间： 2024-10-24 07:19:41