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

мне плохо плавающий див поверх изображения. Вот скрипка того, что я пытаюсь сделать:http://jsfiddle.net/dChUR/

HTML-код:

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

CSS:

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

на этом изображении:

enter image description here

Я хочу, чтобы поле" Featured " плавало поверх изображения, но вместо этого оно, похоже, "очищает" поплавок и заставляет изображение обернуться к следующей строке, как будто это было отображение в виде элемента блока. К сожалению, я не могу понять, что я делаю неправильно. Есть идеи?

5 ответов


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

HTML-код:

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

CSS:

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

ключ контейнер должен быть расположен относительные и тег, расположенный абсолютное.


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

.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-индекса на теге div.


На самом деле просто добавление 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;
  }

еще один toue, чтобы взять, было бы создать 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>

у вас есть правильная идея. Мне кажется, вам просто нужно изменить .tag ' s position:relative to position:absolute и добавить position:relative to .container.


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

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

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

top: 20px;
left: 10px;

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