Trouble styling divs on top of an image (css)

问题

I have a rails app that i've been working on, and one of the functionality aspects I do with it is that I ask the user to import an image (i'm using the paperclip gem to do that). Once they do that and finish creating everything else, I'm taking that image that is imported and using it as a background image for their page. Problem is.....i'm having serious problems actually doing that.

My html (haml) looks like this

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

and my CSS is like so

#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;
  }

Problem I'm having is, the .cafe_info div sits below the image, and not on top of the image. Would anyone have an idea what I can do for this?

回答1:

The two, img and cafe_info is position: relative.

You need to use position: fixed, or position: absolute (depending on what style you would like) to have the cafe_info div on top.

Read more here: look under position absolute

Good luck!

Note:

You could also do something like this:

if you made your css compatible with erb

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

And then you don't need the image_tag.

回答2:

You can try absolute position rather than be using relative and defining the top & left as well. A sample CSS could be like this:

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

来源：https://stackoverflow.com/questions/44948923/trouble-styling-divs-on-top-of-an-image-css

标签

html

css

ruby-on-rails

paperclip