html - 在图像顶部设置 div 样式时出现问题 (css)

Question

我有一个我一直在开发的 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_info div 位于图像下方，而不是图像上方。有人知道我能为此做些什么吗？

Answer 1

这两个，img和cafe_info是position: relative.

您需要使用 position: fixed 或 position: absolute(取决于您想要的样式)将 cafe_info div 放在顶部。

在这里阅读更多:look under position absolute

祝你好运!

注意事项:

你也可以这样做:

如果你让你的 css 与 erb 兼容

#cafe_show.scss.erb      
.image_holding_div {
  position: relative;
  background-image: url(<%= @cafe.image.url(:medium) %>);
}  

然后您就不需要 image_tag。