Fix Overflow, Overlap, and Z-Index Conflicts

Overview

KineticHub blocks can include moving, floating, sticky, transformed, or absolutely positioned visual layers.

These elements may extend beyond the original boundaries of the block.

A parent container, theme rule, custom stylesheet, or another plugin can cause parts of a KineticHub block to become:

• Clipped
• Hidden
• Covered
• Unclickable
• Positioned behind another section
• Visible outside the intended area
• Misaligned after movement
• Incorrectly layered

The most common causes are:

• Parent overflow
• Stacking contexts
• Incorrect z-index assumptions
• Absolute positioning
• Parent transforms
• Decorative overlays
• Pointer-event conflicts
• Fixed heights
• Theme Global Styles
• Broad custom CSS selectors

Do not begin by assigning extremely high z-index values.

First identify which container creates the conflict.

Identify the exact symptom

Determine what is actually wrong before changing CSS.

Clipped

Part of the block is cut off at the edge of a parent container.

Common causes:

• overflow: hidden
• overflow: clip
• Fixed height
• Rounded container clipping
• Mask or clip-path
• Transformed content leaving the parent bounds

Covered

The element exists but another layer appears above it.

Common causes:

• Overlay
• Pseudo-element
• Higher stacking context
• Sticky header
• Modal or popup
• Theme decoration

Unclickable

The element is visible but does not receive clicks, taps, or dragging.

Common causes:

• Transparent overlay
• Incorrect pointer-events
• Another element positioned above it
• Disabled interaction wrapper
• Modal backdrop
• Theme pseudo-element

Outside the intended area

The visual layer extends too far beyond the section.

Common causes:

• Absolute positioning
• Large transform
• Incorrect positioning context
• Negative margins
• Missing containing block
• Percentage positioning based on the wrong ancestor

Behind another section

A visual layer disappears when the next section begins.

Common causes:

• Parent stacking context
• Negative z-index
• Section background
• Isolation
• Transform
• Theme layout wrapper

Inspect the block on the frontend

Use the public frontend rather than only the WordPress editor.

The editor contains additional Gutenberg wrappers that can change:

• Width
• Position
• Overflow
• Stacking
• Selection behavior
• Pointer events

To inspect the frontend:

1. Open the affected page
2. Right-click the problem element
3. Select Inspect
4. Review the element and its parents
5. Check computed styles
6. Move through each ancestor
7. Identify where clipping or layering begins

Do not inspect only the visible child.

The cause is often several parent levels above it.

Understand overflow

The CSS overflow property controls whether content can extend outside its container.

Common values include:

• visible
• hidden
• clip
• auto
• scroll

A parent using overflow: hidden or overflow: clip can cut off:

• Glows
• Shadows
• Slider handles
• Floating buttons
• Transformed media
• 3D movement
• Decorative lines
• Cursor-following elements
• Sticky media
• Animated typography
• Canvas effects

The KineticHub block may be functioning correctly while the parent prevents the complete effect from being visible.

Find the parent causing clipping

Inspect the affected element and move upward through its ancestors.

Look for:

overflow: hidden;

overflow: clip;

overflow-x: hidden;

overflow-y: hidden;

Possible sources include:

• WordPress Group block
• Cover block
• Columns or Column
• Theme content wrapper
• Kinetic Box
• Third-party container
• Page builder section
• Custom CSS
• Global Styles
• Rounded card wrapper

Temporarily disable the overflow rule in browser developer tools.

If the missing part becomes visible, you have identified the clipping container.

Do not remove overflow without checking the design

A parent may intentionally hide overflow to preserve:

• Rounded corners
• Image cropping
• Background masks
• Slider boundaries
• Horizontal containment
• Animated overlays
• Decorative shapes

Changing the complete parent to visible overflow may fix one element while breaking another part of the design.

A better structure may require:

• An outer wrapper for glow or shadow
• An inner wrapper for rounded clipping
• A separate content layer
• Moving the affected element outside the clipping layer
• Applying overflow only on one axis

Use the narrowest correction that preserves the intended design.

Horizontal page overflow

A transformed or oversized element can create a horizontal scrollbar.

Possible causes include:

• Large translation
• Fixed width
• Negative margins
• Wide shadow
• Offscreen decorative layer
• Marquee content
• Full-width block inside a constrained parent
• Mobile content wider than the viewport

Do not solve every horizontal overflow problem by adding:

body {
    overflow-x: hidden;
}

This may hide the symptom while also clipping legitimate effects.

Inspect which element exceeds the viewport width.

In browser developer tools, compare its right edge with the viewport.

Fixed height and clipping

A parent with a fixed height can hide content when:

• Text wraps onto additional lines
• Mobile content becomes taller
• Media loads after the initial layout
• Font loading changes dimensions
• An animated child moves vertically
• A translated element exits the fixed frame

Example:

height: 500px;
overflow: hidden;

This combination can clip content below the fixed height.

Prefer natural height or a flexible minimum height when the content can change.

Stacking contexts

A stacking context is a local layering system.

A child element’s z-index is compared primarily with elements inside the same stacking context.

A stacking context can be created by properties including:

• Positioned element with z-index
• transform
• filter
• perspective
• Opacity below 1
• isolation: isolate
• mix-blend-mode
• contain
• will-change
• backdrop-filter

A child with:

z-index: 999999;

can still appear behind another section when its parent belongs to a lower stacking context.

This is why increasing only the child z-index often fails.

Diagnose a stacking-context conflict

Inspect:

1. The hidden or covered element
2. Its nearest positioned parent
3. Every transformed parent
4. The element covering it
5. The covering element’s parents

Compare the stacking contexts rather than only the final numeric z-index values.

Ask:

• Which parent creates the first stacking context?
• Does the covering section belong to a higher context?
• Does the affected element use a negative z-index?
• Does a parent use opacity or transform?
• Is the element inside an isolated container?

Temporarily disable the parent transform, opacity, filter, or isolation to confirm the cause.

Parent transforms

Transforms are common in animated layouts.

Examples include:

transform: translateY(-20px);

transform: scale(1.05);

transform: rotateY(8deg);

A transformed parent can:

• Create a stacking context
• Change the reference for positioned children
• Affect sticky positioning
• Change how z-index is compared
• Alter fixed-position behavior
• Clip transformed descendants when combined with overflow

This is especially relevant when nesting KineticHub blocks inside:

• Kinetic Box
• Theme entrance animations
• Hover-transform cards
• Smooth-scroll wrappers
• Animated page-builder sections

Test the KineticHub block inside a normal Group block without a transformed parent.

Z-index values

Use z-index only on elements that participate in a relevant positioning or stacking context.

Common positioned values include:

• relative
• absolute
• fixed
• sticky

A z-index may have no useful effect when applied without the required layout context.

Avoid arbitrary values such as:

z-index: 999999999;

Large values do not repair an incorrect stacking hierarchy.

Use a clear local scale where possible:

• Background: 0
• Decorative layer: 1
• Content: 2
• Controls: 3
• Local overlay: 10

Site-wide modals and administration interfaces may require a separate higher layer.

Negative z-index

Negative z-index can place decorative content behind the intended section.

It can also place it behind:

• Parent background
• Page background
• Another stacking context
• The complete site wrapper

When a glow or background effect disappears, check whether it uses a negative z-index.

A safer structure is often:

• Parent with position: relative
• Background layer at z-index 0
• Content layer at z-index 1

This keeps the effect inside the intended section without placing it behind the entire page.

Absolute positioning

Absolutely positioned elements use the nearest positioned ancestor as their reference.

A parent becomes a positioning context when it uses:

position: relative;

or another non-static position.

When the wrong parent becomes the reference, a KineticHub layer may appear:

• Too high
• Too low
• Outside the block
• Relative to the page instead of the section
• Inside the wrong card
• Misaligned after resizing

Inspect the element’s offset parent in browser developer tools.

Confirm that the intended wrapper establishes the positioning context.

Relative positioning

Adding:

position: relative;

to a parent can help contain an absolutely positioned child.

However, it can also change which parent controls other descendants.

Do not add relative positioning globally to every WordPress block.

Apply it only to the specific wrapper that should contain the positioned effect.

Overlays

Overlays are often used for:

• Image tint
• Video previews
• Glass effects
• Darkening backgrounds
• Hover states
• Decorative gradients
• Modal backdrops

An overlay may cover a control even when it is visually transparent.

Possible symptoms include:

• Button cannot be clicked
• Before/After slider cannot be dragged
• Video modal does not open
• Audio controls do not respond
• Links cannot be selected
• Hover effect does not activate

Inspect which element appears under the pointer.

A decorative overlay should normally use:

pointer-events: none;

when it is not intended to receive interaction.

Do not disable pointer events on a functional trigger or control.

Pseudo-elements

Theme and custom styles may create overlays using:

• ::before
• ::after

These pseudo-elements may cover the complete parent.

Example:

.section::before {
    content: "";
    position: absolute;
    inset: 0;
}

When the pseudo-element does not use pointer-events: none, it may block interaction.

Browser developer tools can show pseudo-element styles even though they are not normal HTML elements.

Check both ::before and ::after on the KineticHub block and its parents.

Pointer-events

The pointer-events property controls whether an element can receive mouse or touch interaction.

Decorative layer

A non-interactive decoration can use:

pointer-events: none;

Interactive control

Buttons, handles, links, player controls, and modal triggers need pointer interaction.

Do not apply pointer-events: none to:

• Kinetic Magnetic Button
• Before/After handle
• Video Modal trigger
• Audio controls
• Linked Marquee items
• Cursor Reveal links
• Interactive Kinetic Box content

A parent with disabled pointer events can also prevent interaction for its descendants.

Before/After handle conflicts

Kinetic Before/After uses an interactive handle and updates its position during pointer, touch, or keyboard interaction.

When the handle or arrows are clipped or hidden:

• Check parent overflow
• Check the slider’s own clipping frame
• Check handle z-index
• Check circle dimensions
• Check theme button styles
• Check inherited SVG color
• Check pseudo-elements
• Check nested container transforms

When the handle is visible but cannot be dragged:

• Check overlays
• Check pointer-events
• Check touch-action
• Check whether another element covers the handle
• Check the frontend JavaScript
• Test outside the current parent

Do not increase the handle z-index before confirming which layer covers it.

Video Modal layering

Kinetic Video Modal creates its modal overlay on the frontend after the visitor activates the trigger.

The dialog overlay is appended to the document body rather than remaining inside the original preview container.

This helps prevent normal parent overflow from clipping the opened modal.

However, conflicts can still occur when:

• Another site overlay has a higher stacking context
• A cookie banner covers the dialog
• A theme applies global styles to dialog content
• Body or HTML styles interfere with fixed overlays
• A custom rule changes the modal z-index
• An administration toolbar appears above the overlay
• A popup plugin uses a competing global layer

Inspect the final modal overlay under the document body.

Do not troubleshoot the opened dialog only through the original Video Modal block wrapper.

Modal appears behind the header

A fixed site header may use a high z-index.

When it appears above the Video Modal:

1. Inspect the header z-index
2. Inspect the modal overlay z-index
3. Check whether either parent creates another stacking context
4. Check custom theme modal rules
5. Test while logged out
6. Check cookie and popup overlays

Apply a targeted correction to the modal layer or conflicting header.

Do not reduce every site header z-index globally without checking menus and dropdowns.

Modal close button is hidden

Check whether:

• The close button is outside the visible dialog frame
• Parent overflow clips it
• Another element covers it
• The outside-close option positions it beyond the content boundary
• Mobile viewport height is limited
• Theme button styles reset its dimensions
• The close icon inherits an invisible color

Test both desktop and mobile.

Also confirm that browser zoom is not pushing the button outside the visible area.

Kinetic Box and nested content

Kinetic Box can create:

• Transforms
• Perspective
• Interactive movement
• Overlays
• Rounded clipping
• Shadows
• New stacking contexts

Nested blocks may therefore behave differently inside it.

When a nested block works outside Kinetic Box but not inside it, inspect:

• Box overflow
• Inner content z-index
• Transform and perspective
• Overlay layers
• Pointer events
• Width and height
• SVG fill and color
• The nested block’s own absolute layers

Do not assume that the nested block itself is broken.

Test the same block at the top level to identify whether the parent creates the conflict.

Glows and shadows

Glows and shadows naturally extend beyond the element’s main box.

They may disappear when:

• The parent clips overflow
• The parent has no surrounding space
• Another opaque background covers them
• The effect uses a negative z-index
• The theme resets box-shadow
• A transform creates unexpected rasterization
• A mask or clip-path is applied

When the content remains visible but the glow is missing, inspect the visual layer separately from the content layer.

Canvas and visual backgrounds

Hero Mesh and other decorative visual blocks may use canvas, layered backgrounds, or positioned effects.

When the visual background appears behind the wrong section or disappears:

• Check canvas dimensions
• Check parent position
• Check z-index
• Check negative z-index
• Check clipping
• Check section background
• Check whether content creates a separate stacking context
• Check reduced-motion fallback
• Check frontend initialization

A canvas may exist and run correctly while another background completely covers it.

Sticky content overlapping later sections

Sticky elements remain constrained by their parent section.

They should stop when the parent ends.

When sticky content overlaps later sections, check:

• Parent height
• Incorrect absolute positioning
• Missing wrapper containment
• Theme layout CSS
• Custom sticky rules
• Negative margins
• Incorrect z-index
• Unclosed custom HTML

When the sticky element stops exactly at the section boundary, that is normally correct behavior.

Fixed headers and floating controls

Fixed site elements may overlap KineticHub content.

Examples include:

• Site header
• WordPress admin bar
• Cookie notice
• Chat widget
• Back-to-top button
• Accessibility toolbar
• Floating cart
• Support widget

Check whether the conflict occurs:

• Only while logged in
• Only on mobile
• Only after scrolling
• Only after accepting cookies
• Only when a popup opens

Adjust local spacing, sticky offset, or the relevant layer rather than changing all site z-index values.

Theme button styles

Themes may apply broad styles to:

button

or:

.wp-element-button

This can affect KineticHub controls such as:

• Video close button
• Audio controls
• Slider handle
• Magnetic Button
• Modal trigger
• Navigation controls

Possible symptoms include:

• Unexpected padding
• Large width
• Missing background
• Invisible icon
• Incorrect border
• Wrong line height
• Stretched control

Inspect which theme rule overrides the KineticHub control.

Use a targeted selector rather than resetting every button on the website.

SVG and icon layers

Icons may disappear because of inherited styles affecting:

• fill
• stroke
• color
• Width
• Height
• Opacity
• Display
• Overflow

When an icon is present in the HTML but invisible:

1. Inspect its width and height
2. Check fill and stroke
3. Check inherited color
4. Check opacity
5. Check parent overflow
6. Check whether it is behind another layer
7. Compare it outside the parent container

This is especially important for nested third-party icon blocks.

Blend modes and filters

Properties such as:

• mix-blend-mode
• filter
• backdrop-filter
• opacity

can alter both appearance and stacking.

Possible symptoms include:

• Content blends into the background
• An overlay appears darker than expected
• Text becomes difficult to read
• A glow disappears
• A new stacking context is created
• A child appears behind a neighboring element

Disable these properties temporarily to identify whether they contribute to the problem.

Isolation

A parent using:

isolation: isolate;

creates an isolated stacking context.

This can be useful for containing local effects, but it can also prevent a child from appearing above elements outside that container.

Check isolation when a high-z-index child remains behind another section.

Remove it only when the page design does not depend on local blend or stacking containment.

Custom CSS class collisions

Do not reuse KineticHub internal class names in unrelated Custom HTML components.

For example, a custom preview using classes from the real Audio Player, Before/After, or Video Modal can override the actual block when both are on the same page.

Use a unique namespace such as:

site-demo-

kh-preview-demo-

custom-feature-

Class collisions can cause:

• Incorrect z-index
• Hidden overflow
• Wrong positioning
• Distorted controls
• Unclickable elements
• Missing icons
• Clipped animation

Inspect the covering element

When a KineticHub control is covered:

1. Open browser developer tools
2. Use the element selector
3. Move the pointer over the covered area
4. Identify which element is selected
5. Inspect its position and dimensions
6. Check its background and opacity
7. Check pointer-events
8. Check z-index and stacking context

A transparent element can still cover the complete area.

Test outside the current parent

Create a staging test:

1. Duplicate the affected block
2. Move it outside the current container
3. Place it inside a normal Group block
4. Remove custom classes
5. Use default width and alignment
6. Update the page
7. Test the frontend

When the simplified block works, reintroduce the original parent settings one at a time.

This is faster and safer than changing several z-index values simultaneously.

Use temporary diagnostic styles

Browser developer tools allow temporary changes without modifying the website.

Useful tests include:

outline: 2px solid red;

overflow: visible;

opacity: 1;

pointer-events: auto;

transform: none;

z-index: 10;

Use these only to identify the cause.

Do not copy every temporary rule into production CSS.

Recommended correction strategy

Use this order:

1. Identify the affected visual or control
2. Identify the nearest parent
3. Check overflow
4. Check fixed dimensions
5. Check overlays and pseudo-elements
6. Check pointer-events
7. Identify stacking contexts
8. Check parent transforms
9. Check z-index values
10. Test outside the current container
11. Apply the narrowest correction
12. Test desktop and mobile
13. Test interaction
14. Test nearby sections
15. Clear generated CSS and page caches

Avoid global overrides.

Cache and optimization

Generated CSS may continue serving an old overflow or z-index rule after you update the page.

Clear:

• Page cache
• Generated CSS
• Remove Unused CSS
• Critical CSS
• Server cache
• CDN cache
• Browser cache

An unused-CSS tool may also remove styles for interaction states that appear only after:

• Hover
• Dragging
• Modal opening
• JavaScript initialization
• Mobile layout activation

Test with CSS optimization disabled when a layer disappears only after optimization.

Troubleshooting

A glow or shadow is cut off

Inspect parent overflow and border-radius clipping.

Use a separate outer wrapper when the inner wrapper must retain rounded clipping.

A control is visible but cannot be clicked

Inspect overlays, pseudo-elements, pointer-events, and the element receiving the click.

Check whether another transparent layer covers the control.

Increasing z-index does nothing

The element is probably inside a lower stacking context.

Inspect parent transforms, opacity, filters, positioning, and isolation.

Before/After arrows or handle disappear inside another block

Check parent overflow, nested transforms, SVG color, z-index, and clipping.

Test the Before/After block outside the parent container.

Video Modal opens behind another element

Inspect the modal overlay under the document body and compare it with fixed headers, cookie notices, popups, and chat widgets.

Video Modal is clipped by the original block

The opened modal is created under the document body, so inspect whether custom CSS has changed its fixed overlay or positioned it incorrectly.

Do not inspect only the original preview wrapper.

A nested icon disappears

Check SVG fill, stroke, dimensions, opacity, overflow, and inherited color.

Compare it outside the container.

Hero Mesh or Ambient Aura appears behind the page background

Check negative z-index, parent stacking context, section background, and positioning.

Keep the visual layer inside a local section stacking system.

Split Scroll media overlaps the next section

Check the Split Scroll wrapper height, sticky containment, parent positioning, and custom negative margins.

Magnetic Button moves outside its container and is clipped

Check overflow on the parent section.

Preserve enough space for the configured magnetic movement or place the button inside a wrapper that allows visible overflow.

A shadow stays visually separated from a moving element

Check whether the shadow is applied to a static wrapper while the inner element receives the transform.

The shadow and the transformed visual should normally be applied to compatible layers.

A custom CSS fix works on desktop but breaks mobile

Review the selector inside the mobile breakpoint.

Check fixed dimensions, large z-index changes, viewport overflow, and touch interaction.

The page develops a horizontal scrollbar

Inspect transformed, absolutely positioned, full-width, or negatively margined elements.

Find the actual overflowing element instead of hiding all horizontal overflow globally.

The editor looks clipped but the frontend is correct

The editor may use different wrappers and overflow rules.

Do not change working frontend output until the problem is confirmed outside Gutenberg.

The problem returns after clearing caches

A generated CSS or critical-CSS process may be rebuilding the conflicting rule.

Check optimization settings and stylesheet exclusions.

Information to collect for support

Before contacting KineticHub support, collect:

• KineticHub version
• Free or PRO edition
• Affected block
• Page URL
• Screenshot of the problem
• Screenshot with parent outlines, when possible
• Active theme
• Parent block types
• Relevant custom CSS
• Computed overflow value
• Computed position and z-index
• Parent transform or filter values
• Element covering the control
• Desktop or mobile context
• Cache and optimization plugins
• Whether the block works outside its parent
• Whether the problem continues with custom CSS disabled
• Whether it continues with a default theme on staging
• A short screen recording when interaction is affected

Do not include passwords, private access credentials, payment information, or complete license keys.

Next step

Continue with Mobile Layout or Animation Problems when a KineticHub block works correctly on desktop but appears compressed, hidden, static, clipped, or difficult to use on mobile devices.