2016-12-27 3 views
0

Я пытаюсь сделать дизайн, где некоторый текст id="text-field" будет перекрываться до id="image-field". Я не знаю, как это сделать, спасибо за вашу помощь.Как сделать элементы перекрывающимися друг с другом div

<!DOCTYPE html> 
<html> 
    <body> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-sm-6" id="text-field"> Some text </div> 
       <div class="col-sm-6" id="link-field"> Some link </div> 
      </div> 
      <div class="row"> 
       <div class="col-sm-12" id="image-field">Background Image </div> 
      </div> 
     </div> 
    </body> 
</html> 
+1

'позиции: абсолютный;' –

+1

Вы можете узнать о 'положения: absolute'. –

+0

сначала узнайте о позиции: абсолютный и z-индекс: значение; то, если вы столкнулись с какой-либо проблемой, тогда спросите :) – Ishu

ответ

2

Я сделал небольшой многоразовое пример это довольно распространенная вещь, чтобы сделать с помощью CSS here

Вот пример

.box { 
 
    position: relative; 
 
} 
 
.box__image {} .box__text { 
 
    position: absolute; 
 
    bottom: 0; 
 
}
<div class="box"> 
 
    <div class="box__image"> 
 
    <img src="http://placehold.it/350x150"> 
 
    </div> 
 
    <div class="box__text"> 
 
    Testing text 
 
    </div> 
 
</div>

Просто небольшое объяснение position:relative используется для хранения position:absolute элементов от выхода их содержащей DIV

0

Использование свойств позиции позволяет выполнять элементы.

#image-field{ 
    position: absolute; 
    top: 0px; 
} 

Исследование postions свойство css.You получите больше представления postion properties

Смежные вопросы