I am facing an issue with 2 nested divs in my HTML code. The design requires the inner div to appear "on top of" the outer div, like this:
(source: examplewebsite.com)
Although I have applied CSS to both elements, including a negative top margin on the nested div to create the desired effect, it is not working as expected. Instead of protruding outside the bounds of the parent div, the top portion of the nested div is being cut off, as shown here:
(source: examplewebsite.com)
Absolutely positioning the element is not an option as responsiveness is a key requirement for this page.
Here is the HTML structure for the divs:
<div class="container-div">
<div class="child-div">
...
</div>
</div>
And the corresponding CSS:
.container-div {
padding: 10px 10px 0;
}
.child-div {
display: inline-block;
width: 100px;
height: 60px;
margin: -15px 10px 0;
border: 1px solid #efefef;
background-color: #fff;
}