无法在图像顶部设置 div 样式（css）答案

【问题标题】：Trouble styling divs on top of an image (css)无法在图像顶部设置 div 样式（css）
【发布时间】：2017-07-06 12:29:22
【问题描述】：

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

【问题讨论】：

标签： html css ruby-on-rails paperclip

【解决方案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 了。

【讨论】：

【解决方案2】：

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

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

【讨论】：