无法在图像顶部设置 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

您可以尝试使用绝对位置而不是使用相对位置并同时定义顶部和左侧。示例 CSS 可能是这样的：

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

Answer 2

这两个，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.

无法在图像顶部设置 div 样式 (css)

Trouble styling divs on top of an image (css)

html

css

ruby-on-rails

paperclip

注：