时间戳

首页 > 解决方案 > 让图像显示在另一个图像前面（待续）

html - 让图像显示在另一个图像前面（待续）

问题描述

我被困在这里！我有很多动物的图像

事实上，并列的一张脸的小图像。除了眼睛，所有部分都可见！！我想让眼睛被看到。这就是我编写代码的方式。你可以在我的 [Github repo][3] 中找到完整的代码。以下是代码：

<div class ="leftDiv">
          <div class="container">
         
          <div class ="container image">
            <figure>
              <img src="alpaca/backgrounds/blue50.png" />
            </figure></div>
            
              <div class="container image"><figure>
              <img src="alpaca/eyes/default.png" />
            </figure></div>
              
              <div class="container  image"><figure>
                <img src="alpaca/ears/default.png" />
              </figure></div>
                <div class="container  image"><figure>
                  <img src="alpaca/nose.png" />
                </figure></div>
                  <div class="container image"><figure>
                <img src="alpaca/hair/default.png" />
              </figure></div>
              
                <div class="container  image"><figure>
                <img src="alpaca/leg/default.png" />
              </figure></div>
                
              
              <div class="container  image"><figure>
                <img src="alpaca/mouth/default.png" />
                </figure></div>
              <div class="container  image"><figure>
                <img src="alpaca/neck/default.png" />
                </figure></div>
                </div>
              </div>


 .leftDiv {
    position:absolute;
    left: 230px;
    top: 650px;
    width: 500px;
    height: 500px; 
  } 

  .container {
    position: absolute;
    bottom:60px;
    left: -140px; 
  }
   
  .image { 
    position:absolute;
    z-index: unset;
    
  }

  .leftButton {
    color: black;
    text-align:right;
    font-size:35px;
    font-family: 'sofia';
    border-radius: 30px;
    background-color:rgb(252, 228, 228);
    position:absolute;
    bottom: -410px;
    left:200px;
    
  }

标签： htmlcss

解决方案

我已经看到了我的错误所在。我有几个并列的图像，我希望一些图像与其他图像重叠。这就是 z-index 选项有用的地方。z-index 允许我们将项目显示在其他项目之上。z-index 较高的项目比其他项目更可见。这就是为什么我创建了一个新类 .eye {....; z索引：10；}。在我的 HTML 文件中添加了相同的类，如下所示：

.... 而不是 .... 如帖子中所述。问题就这样解决了！！终于可以看到眼睛了。

推荐阅读