it-swarm.com.ru

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

У меня проблемы с плавающей точкой над изображением. Вот что я пытаюсь сделать: 

    .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;
    }
    <div class="container">
       <div class="tag">Featured</div>
       <img src="http://www.placehold.it/200x200">
    </div>

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

enter image description here

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

40
Jeremy Harris

Никогда не терпит неудачу, как только я отправляю вопрос в 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>

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

77
Jeremy Harris

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

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

17
j08691

На самом деле просто добавляем 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>
6
Thomas Cheney

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

2
user1618143

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

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

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

top: 20px;
left: 10px;
 

Это поместит это 20 пикселей сверху и 10 пикселей слева; но оставьте этот, если не нужно.

0
user2690583