How to make a div overlaying another div-CodePudding

I'm working with Bootstrap 3 and I wanted to make a row like this:

So here is how I tried:

<div >  
    <div >
        <div >
            <div >
                <div >
                    Lorem ipsum ... 
                </div>
                <div >

                </div>
            </div>
        </div>  
        <div >
            <div >
                <div >
                    Lorem ipsum ...
                </div>
                <div >
                
                </div>
            </div>
        </div>
    </div>
</div>

But I don't really know how to make the news-image div which contains the image, overlay the news-content div.

So I would really appreciate if you could help me with that...

Thanks in advance.

CodePudding user response：

This is one way of doing it:

Using relative positioning on the parent.
using absolute positioning on the child and adjusting the position.

.parent {
  position: relative;
  width: 250px;
  height: 100px;
  background: #dbdbdb;
}

.child {
  position: absolute;
  height: 120px;
  width: 120px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #000;
  left: 10px;
  top: -10px;
}

.text {
  position: absolute;
  left: 135px;
  top: 50%;
  transform: translateY(-50%)
}

<div >
  <img src="https://i.picsum.photos/id/995/536/354.jpg?hmac=kARkIcQD-5FYzmRwd89uPn6yxoJvaCg43bkO-kABGGE" alt="" >
  <span >Lorem text</span>
</div>

Fiddle code

CodePudding user response：

From looking at this issue I can suggest you use position:relative for the parent element (which is the news-content). Then add position:absolute for the child element here (which is the news-image). After that offset the child element with margins to position them according to the picture above.