Html 在图像顶部设置div样式（css）时遇到问题

我有一个rails应用程序，我一直在开发，其中一个功能是我要求用户导入一个图像（我正在使用回形针gem来实现）。一旦他们完成了这项工作，并完成了其他所有的创建工作，我将获取导入的图像，并将其用作他们页面的背景图像。问题是……我在做这件事时遇到了严重的问题

我的html（haml）如下所示

#cafe_show
  .image_holding_div
    = image_tag @cafe.image.url(:medium)
    .cafe_info
      This is a quick test

我的CSS就是这样

#cafe_show {    
  .image_holding_div {
    position: relative;
  }    
  img {
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: -1;
  }
}

.cafe_info {
  position: relative;
  float: center;
  height: 100px;
  width: auto;
  background-color: #808080;
  opacity:.9;
  text-align:center;
  color:white;
  }

---

我遇到的问题是，

.cafe\u info

div位于图像下方，而不是图像上方。有人知道我能做些什么吗？

你可以试试绝对位置，而不是使用相对来定义左上角。CSS示例可以如下所示：

.cafe_info { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

---

img和cafe_信息这两种信息是相对的。

您需要使用

position:fixed

或

position:absolute

（取决于您想要的样式）将cafe_info div置于顶部

请在此处阅读更多信息：

祝你好运

注: 你也可以这样做：

.cafe_info { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

如果您使css与erb兼容

#cafe_show.scss.erb
.图像保存分区{
位置：相对位置；
背景图片：url（）；
}  

然后你就不需要图像标签了