Try our conversational search powered by Generative AI!

Overlapping properties in edit mode



I would like to make an image with overlapping text both editable in on-page editing.

According to this blog post and this forum thread it should be possible to do this by using the data-epi-overlay-z-index attribute.

I created this simple example but it doesn't work:

x.HeaderImage)> x.Heading)>@Model.Heading

Only the image is editable on-page, not the heading.

Any suggestions to make this work?

Using EPiServer version 8.10.0

Jul 13, 2015 16:43


I tested this scenario on Alloy site. It looks like overlaping properties doesn't mean nesting properties. When properties are nested like in your example then the OnPage editor for nested span is not renderred.

You could use the markup like:

<div data-epi-overlay-z-index="1000" style="height: 250px;background-image: url('@Url.ContentUrl(Model.HeaderImage)');" @Html.EditAttributes(x => x.HeaderImage)>

 <span data-epi-overlay-z-index="2000" @Html.EditAttributes(x => x.Heading)>@Model.Heading</span>

Then using CSS styles make those two elements overlaping and then data-epi-overlay-z-index should work.

Also you could add a condition to your markup view: PageEditing.IsInEditMode.

If true (editor view) then render markup with non-nested elements. If false (end user view) then render nested elements (even without editors) .

Jul 14, 2015 9:45

Hi Grzegorz,

You are complete right about the nesting of the properties. If I take your example code and style the heading over the image it works perfectly.

Thanks a lot!!


Jul 14, 2015 11:05
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.