Fatal编程技术网
  • javascript/
  • Javascript 堆叠使用百分比大小的图像

Javascript 堆叠使用百分比大小的图像

javascript jquery html css

Javascript 堆叠使用百分比大小的图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想知道如何将使用百分比值确定大小（在本例中为100%）的图像堆叠在彼此之上。如果他们有一个设定的像素宽度/高度，我就可以简单地用position:relative调整他们的位置，让他们在屏幕上占据相同的位置。然而，显然我不能做{position:relative；bottom:100%}来移动一个在另一个之下/之上 请看我在这里使用全浏览器宽度图像的意思： 警告：将下载大量大型图像 cmg.reef3.com 我希望这些都在彼此下方/上方，以便每隔几秒钟以淡出的方式显示它们 非常感谢您的帮助。

我想知道如何将使用百分比值确定大小（在本例中为100%）的图像堆叠在彼此之上。如果他们有一个设定的像素宽度/高度，我就可以简单地用position:relative调整他们的位置，让他们在屏幕上占据相同的位置。然而，显然我不能做{position:relative；bottom:100%}来移动一个在另一个之下/之上

请看我在这里使用全浏览器宽度图像的意思：

警告：将下载大量大型图像 cmg.reef3.com

我希望这些都在彼此下方/上方，以便每隔几秒钟以淡出的方式显示它们

非常感谢您的帮助。

您需要

  • 将
    position:absolute
    设置为图像。这会使它们堆积起来
  • 使用
    top:npx调整其位置和/或
    左：npx和/或
    底部：npx属性（n=编号）
  • 为每个图像设置
    z-index:n
    ，其中n=一个数字。较高的数字将使图像位于顶部
  • jQuery淡出最上面的图像，淡出完成后，它的z索引降到最低，以将其发送到最下面的图像
    • 如果您正试图制作幻灯片，那么有许多书面脚本可用。像这样的

    为什么不在淡入淡出过渡中使用z顺序？