Floating Banner Over Two Index Sections in Squarespace

In this Squarespace tutorial, I show you how to position an index section so that it overlays two other sections. This is really good for creating eye catching calls to action and adding more variety to your Squarespace layouts.

Create an Index Section that Overlays Two Other Sections

Custom CSS:

#float-section {
  width: 80%;
  position: absolute;
  z-index: 30;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%,-50%);

  .Index-page-content {
    padding: 3em 2em;
  }

  & + section {
    padding-top: 80px;
  }
}

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris