How to use Z-Index to Overlap Sections on Your Funnel Page - TFC24
Channel: Dan Havey
Date: 2021-07-02

For More Training on ClickFunnels 1.0 and 2.0, Membership Sites, Courses and Custom Code Hacks - Go To https://CFninjas.com

Check out the One Funnel Away Challenge here… https://funneldesignmastery.com/ofa-challenge

How to use Z-Index to Overlap Sections on Your Funnel Page

In this video I walk thru how to redesign a site using only the Chrome Developer Tool to show a student how to use z-index and negative margins to overlap elements.

The transcript provides instructions on using z-index to overlap sections on a funnel page. The speaker suggests fixing the visibility and cropping of an image at the top, making it sticky as you scroll. They mention making the black area appear over the red area at the bottom by adjusting negative margins. The speaker also explains how to use negative margins and the "stick to top on scroll" option. They demonstrate inspecting elements and setting their heights. The speaker advises against using capital letters in CSS and recommends using z-index with a higher value to bring elements to the front.

The speaker suggests replacing the image at the top with a better quality and cropped version.
They recommend making the top image sticky so that it remains visible while scrolling.
The black area is adjusted to appear over the red area at the bottom using negative margins.
The speaker demonstrates using negative margins and the "stick to top on scroll" option.
They explain how to inspect elements and determine their heights.
It's advised to set the section height to display the full image and adjust it accordingly.
Overflow visible is unnecessary and can be removed from multiple sections.
Using capital letters in CSS, such as in "margin-top," is discouraged.
Z-index can be used to control the stacking order of elements, with a higher value bringing an element to the front.

#CFninjaHacks #QuickStartBlueprint #DanHavey