Solution 1 :

<div class="morph-wrap"> is fixed relative to its parent container. If you move <div class="morph-wrap"> outside of <div id="main">, it will remain fixed as you scroll.

<div id="content-scroll">
  <div class="morph-wrap"></div>
  <div id="main"></div>

Include your HTML next time so we don’t have to inspect your website. It will help us help you. 😀

Problem :

so i have an svg morph animation using anime.js and scrollmonitor as a background div while another div which has content of the page is to scroll over the fixed background div.
but it isnt working as expected. the background div doesn’t stay fixed as the background and scrolls down with the overlay div.

kindly help out with this. i am clueless so as to what i am missing out.
here is the link to the website

.morph-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1000;

    position: relative;
    z-index: 1100;
    overflow-y: auto;


Comment posted by Triby

Place the

Comment posted by Shubham Gupta

it does work, tested it using the dev console to drag the div below the preloader but this page is on Vue.js. so i can only control elements inside the app div. so the preloader part is static on the index.html so this solution really doesnt help.

Comment posted by Shubham Gupta

also when i do this. the morph-wrap div is above most of the content on the page including the footer. any other work around?

Comment posted by Shubham Gupta

really sorry didnt attach the html. thought it would be extra nested and tedious to go through

Comment posted by Julie Xiong

No worries! You can eliminate unnecessary HTML that aren’t related to your issue to keep it from getting too long. Or, provide a simple example of your HTML structure so we have an idea of what could be wrong.

Comment posted by Shubham Gupta

i have the router-view nested inside the div#main which had the component containing the morph-wrap and content-wrap divs. so to place the morph-wrap div outside the router-view would be a problem

Comment posted by Julie Xiong

Something is adding