为什么我这段代码给第二个li加left top值没用呢？

<!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不叠加为什么还是上下排列？

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;float:left;}

li:nth-child(2){background: url(./玩具总动员2张图片/2.jfif);transform: rotateY(180deg);width: 300px;height: 300px;margin-left: -300px;top: 0;float:left;}

可以让两张图片重叠。

因为你得给li加position:absolute

如果想相对ul定位的话，position:relative写在ul标签里，如果想根据box定位，position:relative写在.box标签里