如何让随机显示的最后一个fadeIn div始终处于最顶部位置？

你的思路完全可行！借助Flexbox的order属性，我们可以轻松控制通知的显示顺序，让最新出现的通知始终排在最顶部。下面是具体的实现步骤和代码：

步骤说明 #

1. 添加容器包裹所有通知：把所有.notification元素放到一个容器中，方便用Flexbox统一控制布局。
2. 设置Flex容器样式：使用flex-direction: column-reverse，让元素按反向列排列——order值越大的元素会越靠上。
3. 用计数器管理order值：每次显示新通知时，给它分配一个递增的order值，确保它是当前最大的，从而自动排在顶部；通知淡出后清除order属性，避免影响下次显示。
4. 优化选择逻辑：只从隐藏的通知中随机选择，避免重复操作正在显示的元素（这个优化可选，你可以根据需求调整）。

完整代码 #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notifications-container">
  <div class="notification">1</div>
  <div class="notification">2</div>
  <div class="notification">3</div>
  <div class="notification">4</div>
  <div class="notification">5</div>
  <div class="notification">6</div>
  <div class="notification">7</div>
  <div class="notification">8</div>
  <div class="notification">9</div>
  <div class="notification">10</div>
</div>

CSS

.notifications-container {
  display: flex;
  flex-direction: column-reverse; /* 反向列排列，order值大的元素在顶部 */
  gap: 5px; /* 替代margin-bottom，更简洁的间距控制 */
}

.notification {
  width: 200px;
  height: 50px;
  background-color: yellow;
  border: 1px solid rgba(0,0,0,0.2);
  text-align: center;
  padding-top: 20px;
  display: none; /* 初始隐藏，配合fadeIn/fadeOut效果 */
}

JavaScript

var myVar;
let orderCounter = 0; // 记录当前最新的order值

function showDiv(){
  // 只选择隐藏的通知，避免重复操作正在显示的元素
  const hiddenNotifications = $('.notification:hidden');
  if (hiddenNotifications.length === 0) return; // 没有可显示的通知时停止（可选）
  
  const randomIndex = Math.floor(Math.random() * hiddenNotifications.length);
  const selectedNotification = hiddenNotifications.eq(randomIndex);
  
  // 给当前通知分配递增的order值，确保它排在最顶部
  orderCounter++;
  selectedNotification.css('order', orderCounter)
                     .fadeIn(200)
                     .delay(3000)
                     .fadeOut(200, function() {
                       // 淡出后清除order属性，避免影响下次显示
                       $(this).css('order', '');
                     });
  
  createRandomInterval();
}

function createRandomInterval(){
  setTimeout(showDiv, 500 + Math.random() * 4000);
}

$(document).ready(function(){
  createRandomInterval();
});

关于你提出的类方案的可行性 #

你想通过添加动态类（如order-[number]）来设置order属性的思路是完全可行的，但直接用JS设置元素的style.order会更简洁，不需要维护一堆CSS类。如果一定要用类的方式，可以借助Sass/LESS的循环预定义类，或者用JS动态创建样式规则，但相比之下直接设置内联样式会更高效。

内容的提问来源于stack exchange，提问作者Referee Andy