我看不到整个HTML元素

Question

我有两个div

第一个div：text-logo

.text-logo {
            width: 250px;
            height: 60px;
          margin: auto;
            border: 2px solid #07a2a0;
            border-radius: 15px  50px  15px 50px;
    margin-top: 100px;
   

    
          }

         <div class="text-logo"><h4>Just training/cit</h4></div>

第二个div：image-logo

.image-logo { overflow: hidden; height: 500px;}
.image-logo .left 
{ 
    float: left ;
    width: 30%;
    position: relative;
}

.image-logo .right
{
    float: left;
    width: 70%;
}

.image-logo .left img
{
    width: 180px;
    height: 180px;
    position: relative;
    bottom: 50px;

}

   <div class="image-logo">
                    
                    <div class="left">                    
                        <img src="images/logo.png">
                    </div>
                    
                    <div class="right">
                      <h2>Being auomated much more easy than the manual things
                      </h2>
                        <hr>
                    </div>

我看不到原始尺寸的蓝色徽标，徽标的上半部分是隐藏的，

图片会显示问题

，

Answer 1

尝试添加z-index

.image-logo .left img
{
    width: 180px;
    height: 180px;
    position: relative;
    bottom: 50px;
    z-index:2;

}

Answer 2

那是因为div .text-logo高于你的徽标div。您应该更改其中一个的z-index。它定义哪个元素应该在另一个元素之上。用于z-index一个真实的值，以保持代码更清洁。

  .image-logo .left img {
    width: 180px;
    height: 180px;
    position: relative;
    bottom: 50px;
    z-index:5; 
    }

Answer 3

检查元素的color是否与background color不同，因为这显然会让你看不到你的元素。

我已成为这个的受害者。希望它可以帮到某人。