Question

我正尝试重新开发一段时间以来做过的CSS实验，以使其在移动设备上观看时更轻松，更快捷。您可以看到here的原始版本。它由28层图像组成。花卉图像网格设置为固定位置，风景设置为绝对位置。

在原始版本中，我在每个网格层上使用空白PNG，以防止花朵图像彼此重叠。这有点麻烦，我正在寻找一种不太复杂的解决方案。我知道我也可以创建空的div以达到类似的效果，但又不理想。

我已经拿出所有花朵图像，将它们设置为position：fixed和display：inline-block，每个图像都有自己的z-index。分层有效，但它们都彼此堆叠在一起。我希望它们显示在网格中，以便您可以看到消失的拼贴效果。

我发现了这个post，这是一个类似的问题。我尝试在每个花朵图像周围放置一个div并使用相应的CSS，但是没有用。我还阅读了有关z-index堆叠顺序的信息，并且了解为什么我的以下标记无法正常工作。但是我想不出一种方法来达到我想要的结果！

在此先感谢您的反馈。

这是到目前为止的标记（“级别”指的是可见层）：

html, body {
	width: 100%;
	margin: 0;
	min-width: 980px;
}

.scene {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 980px;
	height: auto;
}

.flower {
	display: inline-block;
	min-width: 10%;
	max-width: 100px;
	position: fixed;
}

/* Layer 1 */

#scene1 {
	z-index: 0;
}

/* Layer 2 */

#layer2 {
	z-index: 20;
}

/* Layer 3 */

#scene2 {
	z-index: 2;
}

/* Layer 4 */

#layer4 {
	z-index: 1;
}

/* Layer 5 */

#scene3 {
	z-index: 5;
}

/* Layer 6 */

#layer6 {
	z-index: 24;
}

/* Layer 7 */

#scene4 {
	z-index: 7;
}

/* Layer 8 */

#layer8 {
	z-index: 4;
}

/* Layer 9 */

#scene5 {
	z-index: 9;
}

/* Layer 10 */

#layer10 {
	z-index: 10;
}

/* Layer 11 */

#scene6 {
	z-index: 11;
}

/* Layer 12 */

#layer12 {
	z-index: 6;
}

/* Layer 13 */

#scene7 {
	z-index: 13;
}

/* Layer 14 */

#layer14 {
	z-index: 14;
}

/* Layer 15 */

#scene8 {
	z-index: 15;
}

/* Layer 16 */

#layer16 {
	z-index: 16;
}

/* Layer 17 */

#scene9 {
	z-index: 17;
}

/* Layer 18 */

#layer18 {
	z-index: 18;
}

/* Layer 19 */

#scene10 {
	z-index: 19;
}

/* Layer 20 */

#layer20 {
	z-index: 28;
}

/* Layer 21 */

#scene11 {
	z-index: 21;
}

/* Layer 22 */

#layer22 {
	z-index: 12;
}

/* Layer 23 */

#scene12 {
	z-index: 23;
}

/* Layer 24 */

#layer24 {
	z-index: 22;
}

/* Layer 25 */

#scene13 {
	z-index: 25;
}

/* Layer 26 */

#layer26 {
	z-index: 26;
}

/* Layer 27 */

#scene14 {
	z-index: 27;
}

/* Layer 28 */

#layer28 {
	z-index: 8;
}

<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-1.jpg" id="layer2" class="flower"> <!-- Level 20 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-2.jpg" id="layer4" class="flower"> <!-- Level 2 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-3.gif" id="layer6" class="flower"> <!-- Level 24 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-4.gif" id="layer8" class="flower"> <!-- Level 4 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-5.gif" id="layer10" class="flower"> <!-- Level 10 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-6.gif" id="layer12" class="flower"> <!-- Level 6 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-7.jpg" id="layer14" class="flower"> <!-- Level 14 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-8.gif" id="layer16" class="flower"> <!-- Level 16 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-9.jpg" id="layer18" class="flower"> <!-- Level 18 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-10.gif" id="layer20" class="flower"> <!-- Level 28 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-11.gif" id="layer22" class="flower"> <!-- Level 12 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-12.gif" id="layer24" class="flower"> <!-- Level 22 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-13.gif" id="layer26" class="flower"> <!-- Level 26 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-14.gif" id="layer28" class="flower"> <!-- Level 8 -->

	<img src="https://frejachristiana.com/mygarden/azaleas/azalea.png" id="scene1" class="scene"> <!-- Level 1 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-2.png" id="scene2" class="scene"> <!-- Level 3 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-3.png" id="scene3" class="scene"> <!-- Level 5 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-4.png" id="scene4" class="scene"> <!-- Level 7 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-5.png" id="scene5" class="scene"> <!-- Level 9 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-6.png" id="scene6" class="scene"> <!-- Level 11 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-7.png" id="scene7" class="scene"> <!-- Level 13 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-8.png" id="scene8" class="scene"> <!-- Level 15 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-9.png" id="scene9" class="scene"> <!-- Level 17 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-10.png" id="scene10" class="scene"> <!-- Level 19 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-11.png" id="scene11" class="scene"> <!-- Level 21 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-12.png" id="scene12" class="scene"> <!-- Level 23 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-13.png" id="scene13" class="scene"> <!-- Level 25 -->
	<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-14.png" id="scene14" class="scene"> <!-- Level 27 -->

带有显示的图像网格：内联块；位置：固定；和分层的z-index值

0 个答案: