Question

我有一个我一直在研究的rails应用程序，我使用它的一个功能方面是我要求用户导入图像（我使用回形针宝石来做那）。一旦他们这样做并完成了其他所有内容，我就会获取导入的图像并将其用作页面的背景图像。问题是......我实际上遇到了严重的问题。

我的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）

2 个答案:

注意：