Плавающее Div над изображением

Ответ 1

Никогда не терпит неудачу, как только я отправляю вопрос в SO, я получаю некоторый просветляющий момент "ага" и выясняю это. Решение:

    .container {
       border: 1px solid #DDDDDD;
       width: 200px;
       height: 200px;
       position: relative;
    }
    .tag {
       float: left;
       position: absolute;
       left: 0px;
       top: 0px;
       z-index: 1000;
       background-color: #92AD40;
       padding: 5px;
       color: #FFFFFF;
       font-weight: bold;
    }

<div class="container">
       <div class="tag">Featured</div>
       <img src="http://www.placehold.it/200x200">
</div>

Ответ 2

Измените свое позиционирование немного:

.container {
    border: 1px solid #DDDDDD;
    width: 200px;
    height: 200px;
    position:relative;
}
.tag {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: green;
}

Пример jsFiddle

Вам нужно установить относительное позиционирование на контейнере, а затем абсолютное на внутреннем теге div. Абсолютное позиционирование внутренней метки будет относиться к внешнему относительно расположенному div. Вам даже не нужно правило z-index в теге div.

Ответ 3

На самом деле просто добавьте margin-bottom: -20px; к классу тегов исправлено его право.

http://jsfiddle.net/dChUR/7/

Будучи блочными элементами, div естественно определил границы, которые они стараются не нарушать. Чтобы получить их для слоя для изображений, у которых нет содержимого рядом с изображением, потому что у них нет закрывающего тега, вам просто нужно заставить их делать то, что они не хотят делать, например нарушать их естественные границы.

.container {
  border: 1px solid #DDDDDD;
  width: 200px;
  height: 200px;
  }
.tag {
  float: left;
  position: relative;
  left: 0px;
  top: 0px;
  background-color: green;
  z-index: 1000;
  margin-bottom: -20px;
  }

Еще одна задача - создать div, используя изображение в качестве фона, а затем поместить содержимое, когда захотите.

<div id="imgContainer" style="
         background-image: url("foo.jpg"); 
         background-repeat: no-repeat; 
         background-size: cover; 
         -webkit-background-size: cover; 
         -mox-background-size: cover; 
         -o-background-size: cover;">
  <div id="theTag">BLAH BLAH BLAH</div>
</div>

Ответ 4

У тебя есть правильная идея. Похоже, вам просто нужно изменить .tag position:relative на position:absolute и добавить position:relative в .container.

Ответ 5

вы можете подумать об использовании позитивного и абсолютного позиционирования.

`.container {  
position: relative;  
}  
.tag {     
position: absolute;   
}`  

Я протестировал его там, также если вы хотите, чтобы он изменил свою позицию, используйте это как его поле:

top: 20px;
left: 10px;

Он разместит 20 пикселей сверху и 10 пикселей слева; но оставьте это, если это не необходимо.