Fixing the position of an overlapping image

Site URL: https://bernardandhawkes.com/the-library

Hi, Just wondering how I would go about getting the pink squiggly line to always be positioned at the top of the section, like you can see in the bottom screenshot below.
Top screenshot is what is currently happening on the site.
Thanks!

section[data-section-id="5ee3890941a7fb71eb09acab"] .row.sqs-row .sqs-col-4:nth-child(2) .sqs-block-image:first-child {
  position: absolute;
  width: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

Please check

Thank you so much for the quick response! This is what happened when I added the code...It moved it down onto the image, would I just need to tweak it to sit at the top of the whole section? Thanks!

I am seeing this in the live site

@laurenjaynehughes  are you able to share a screenshot of where you've added that image in the page? This is doable however it may require laying out your elements in a different order. 

Hi Ryan, do you mean a screenshot of the page in edit mode? Thanks

@laurenjaynehughes yep! 

Thanks! I am actually having a nightmare with this section because of the overlapping image below it as well! e

@RyanDejaegherI was wondering if you could still help with this. I actually decided to remove the pink squiggle line as I couldn't get it to work. But I am trying to get the image of the A frame cabin to work overlapping into the section below. I currently have this code....
 

//desktop negative margin: spotlight//

[data-section-id="5ee3890941a7fb71eb09acab"] {
 z-index: 3;
.content { margin-bottom: -200px;}

  & + section {

    padding-top: 100px;

  }

}

and similar for mobile, but this makes the text on the left hand side move down with it, is there any way to just have the image overlap? Thank you so much!