When the problem isn’t the element’s CSS at all #
Not every visual problem is caused by a CSS rule on the element you’re looking at. Sometimes the problem is caused by another element in the same space. An overlapping element that’s blocking clicks. A sibling element in a flex container that’s taking up space and squeezing your element out. A pseudo-element that’s extending beyond its intended area and covering something else. A sticky header that’s covering page content when you scroll.
These problems look like CSS issues on the affected element because that’s where the visible symptom appears. But the fix lives on a different element entirely. Lens calls these competitor elements: elements in proximity to the one you clicked that are affecting its visual presentation or behavior.
Types of competitor element problems Lens detects #
Overlap and z-index conflicts #
2 elements occupying the same visual space, with 1 sitting on top of the other. This causes clicks to go to the wrong element (you click a button but nothing happens because a transparent or semi-transparent element is on top of it), or causes content to appear hidden when it’s actually behind something.
z-index conflicts are particularly common in WordPress sites with sticky headers, popup plugins, and page builders that generate their own stacking contexts. The symptom is often that a dropdown menu or modal appears behind another element, or that a button is visible but unclickable.
Flexbox and grid sibling competition #
When a parent container uses Flexbox or CSS Grid, all direct children are competing for space according to the parent’s distribution rules. If 1 sibling element has a flex-grow value or a fixed width that consumes more space than intended, other siblings get squeezed. Your element’s own CSS is fine. The problem is the distribution rules on the parent and the competing claims of sibling elements.
This is common in navigation bars where one menu item is much wider than the others, in card layouts where one card’s content causes the whole row to reflow, and in sidebar layouts where the main content area and sidebar are fighting over available width.
Pseudo-element overlap #
CSS pseudo-elements (::before and ::after) are invisible structural elements that plugins and themes use to add decorative content, arrows, badges, and overlays. They don’t appear in the page HTML, which makes them invisible in visual inspection. When a pseudo-element extends beyond the bounds of its parent, it can overlap adjacent content and block interaction with it.
These are particularly hard to diagnose without the right tools because the element causing the problem isn’t visible in the HTML structure at all.
Position absolute elements #
Absolutely positioned elements are removed from normal document flow. This means they can sit on top of other content without affecting the layout of those elements. A plugin that adds an absolutely positioned badge, notification, or overlay may be covering other content without the site owner realising it, because the covered content still renders normally and the overlap only becomes apparent when someone tries to interact with it.
How Lens detects competitors #
When you click an element with Lens active, Lens reads the computed position, dimensions, and z-index of the element and checks for other elements in proximity that may be creating the interactions described above. It doesn’t just read the single element. It reads the surrounding space.
When a competitor element is detected, the diagnosis names the competitor, describes how it’s interfering, and traces it to its source: the plugin, theme, or Page Builder that created it. The triage step tells you which element to adjust and how.