Quick note

Specify z-index for a property's overlay in EPiServer's on page edit mode

Sometimes two property values overlap when rendered in a template. It may for instance be a string property whose value should be rendered on top of an image which is also a property. Or it may be a link/URL property that should be rendered at the of a string property.

By default both properties will have an overlay, the thin blue border that is positioned on top of the element in which the property value is rendered. However, only one of them will be clickable.

To handle that we can specify the z-index for the overlay for the property that isn't clickable. To do so add a data-epi-overlay-z-index attribute to the element that contains the property. For instance, when using ASP.NET MVC and Razor:

<h1 data-epi-overlay-z-index="123" @Html.EditAttributes(x => x.Heading)>
    @Model.Heading
</h1>
Joel Abrahamsson

Joel Abrahamsson

I'm a passionate web developer and systems architect living in Stockholm, Sweden. I work as CTO for a large media site and enjoy developing with all technologies, especially .NET, Node.js, and ElasticSearch. Read more

More about EPiServer CMS