问题描述：
使用标准文档流进行布局，鼠标会频繁触发 mouseenter 和 mouseleave 事件，无法正常修改 spsan 的位置。
该问题需将文字（即 li）置于图片（即 span）之上，防止触发 mouseleave 事件。
可以将最外层的大盒子采用绝对定位进行布局，在大盒子内部指定 z-index 指定重叠层级。
代码示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>筋斗云案例</title><link rel="stylesheet" href="css/cloud.css"><script src="js/animate.js"></script><script src="js/cloud.js"></script></head><body><div class="c-nav"><span class="cloud"></span><ul><li><a class="current" href="javascript:;">师资力量</a></li><li><a href="javascript:;">活动策划</a></li><li><a href="javascript:;">企业文化</a></li><li><a href="javascript:;">招聘信息</a></li><li><a href="javascript:;">公司简介</a></li><li><a href="javascript:;">谁是佩奇</a></li><li><a href="javascript:;">我是佩奇</a></li></ul></div></body></html>
window.addEventListener('load', function () {// 获取元素let cloud = document.querySelector('.cloud');let li_lists = document.querySelectorAll('.c-nav ul li');let cloud_origin_position = cloud.offsetLeft;for (let i = 0; i < li_lists.length; i++) {li_lists[i].addEventListener('mouseenter', function () {easeAnimate(cloud, this.offsetLeft);});li_lists[i].addEventListener('mouseleave', function () {easeAnimate(cloud, cloud_origin_position);});li_lists[i].addEventListener('click', function () {cloud_origin_position = cloud.offsetLeft;})}});
* {margin: 0;padding: 0;}ul li {list-style: none;}body {background-color: black;}/* 把主体设置为绝对定位，*//* 同时将 span 的 z-index 设置为 -1，li 的 z-index 设置为 1，*//* 即将文字置于图片之上，防止鼠标频繁交替触发 mouseenter 和 mouseleave 事件 */.c-nav {position: absolute;top: 80px;left: 50%;transform: translateX(-50%);}.c-nav li {float: left;margin: 0 20px;}.c-nav li a {color: red;font-size: 23px;text-decoration: none;z-index: 1;}.cloud {position: absolute;width: 100px;height: 50px;background: url("../images/cloud.png") no-repeat;background-size: 100px 50px;z-index: -1;}
