How to overlay a div without messing with other div

Question

I have a container div like this:-

<div class="container">
<div class="parent"></div>
<div class="child"></div>
</div>

I want to overlay the child div like this But without touching the parent div css. How can I achieve this. I'll appreciate any kind of suggestions.

You can use the same code from that link, the only difference is `position:relative` would go on `.container` instead — Rainbow, Oct 01 '21 at 10:42
Does this answer your question? [Position absolute but relative to parent](https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent) — mr.Hritik, Oct 01 '21 at 11:14
I'm asking what css should I apply to child container and I can't change the parent div css Or position. — HIMANSHU SINGH, Oct 01 '21 at 11:33

score 0 · Answer 1 · answered Oct 01 '21 at 12:03

It is not clear from what you want to achieve but can try some of the below stuf :

You can achieve that by using top/bottom/left/right property and position: relative to the .child according to need.
You can achieve by using extra container and add display: flex;width:100% and using justify-content properties according to need .
float: left/right can also be used according to need(but you will not able to position other than left, right and use margin)
Simply by top/bottom/left/right margin can achieve the position .

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 400px;
  height: 300px;
  border: 3px solid #73AD21;
}

.parent {
  width: 200px;
  height: 80px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.child {
  position: relative;
  left: 180px;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

<div class="container">
  <div class="parent"></div>
  <div class="child"></div>
</div>

How to overlay a div without messing with other div

1 Answers1