1

I'm using the Angular framework with custom components. Here's the code:

</form-line>
        <form-line>
        </form-line>
        <form-line>
            <div *formLineChild>
                <img
                    src="cat.jpg">
            </div>
        </form-line>
        <form-line>
        </form-line>

I want the cat image to overflow the two white form-line. Here's what it currently looks like:

https://i.stack.imgur.com/GAjWQ.png

LeomaiaJr
  • 13
  • 2
  • Does this answer your question? [Bring element to front using CSS](https://stackoverflow.com/questions/15782078/bring-element-to-front-using-css) – ulou Apr 27 '21 at 17:17
  • I tried using position relative and z-index in the div with the cat image, but nothing changes. – LeomaiaJr Apr 27 '21 at 17:19
  • Can you add more code? or ideally create snippet? – ulou Apr 27 '21 at 17:20
  • What could be useful to you? I'm currently with zero CSS, I tried many things, but nothing. – LeomaiaJr Apr 27 '21 at 17:21

1 Answers1

1

Try this styling:

#formLineChild {
 position: relative;
 height: 70px;
 background-color: gray;
 margin-top: 2rem;
}

img {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
<div id="formLineParent">
 <div id="formLineChild">
    <img src="https://source.unsplash.com/100x100/?cat">
 </div>
</div>
filoscoder
  • 495
  • 1
  • 4
  • 10