<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
.box{width: 1000px;height: 500px;margin: 100px auto;border: 1px solid black;position: relative;perspective: 700px;}
ul{width: 300px;height:300px;position: absolute;transform-style: preserve-3d;transition: 5s;}
li:nth-child(1){background: url(./玩具总动员2张图片/src=http___pic1.win4000.com_wallpaper_a_53b4ca6e3b504.jpg_down&refer=http___pic1.win4000.jfif);width: 300px;height: 300px;}
li:nth-child(2){background: url(./玩具总动员2张图片/2.jfif);transform: rotateY(180deg);width: 300px;height: 300px;left: 0;top: 0;}
.box:hover .ul{transform: rotateY(180deg);}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
而且ul已经设置position：absolute了，已经脱离文档流了， 为什么子元素的两个li不叠加为什么还是上下排列？
