how to make elements overlap to another div

Question

I am trying to make a design where some text of id="text-field" will overlap to id="image-field". I have no idea how to do this, Thank you for your help.

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

first learn about position:absolute and z-index:value; then if you face any problem then ask :) — Ishu, Dec 27 '16 at 05:51
It's already answered in stackoverflow. Please check this thread: http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css — Rohit Dodle, Dec 27 '16 at 06:01

score 2 · Accepted Answer · edited Dec 27 '16 at 06:12

I made a small re-usable example it's a fairly common thing to do with css here

Here is a example

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

Just a small explanation position:relative is used to keep position:absolute elements from going out of their containing div

score 0 · Answer 2 · edited Dec 27 '16 at 06:19

0

Using position properties you can ser postion of elements.

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

Research on postions property of css.You will get more idea postion properties

edited Dec 27 '16 at 06:19

Muhammad Omar ElShourbagy

6,718
2
32
50

answered Dec 27 '16 at 05:54

Mr.Pandya

1,899
1
13
24

how to make elements overlap to another div

2 Answers2