Why Kendo menu is showing overlapping text?

Question

I have a simple app where a Kendo menu is displayed and there is some text content on the page. The problem is that when the menu shows up then it still shows the text content behind it as in the image below.

The sample for this including all code can be seen at Demo code for this issue. The code in this sample has been divided into three sections using the following comments <!--page resources-->, <!--page script-->, <!--page html--> and <!--page styles-->

The correct display for Kendo menu should be as below.

What I found after some research is that if the style of the paragraph displaying the text content has position:unset, then this Kendo menu issue disappears, but I still fail to understand why by adding this style the text content gets hidden behind the Kendo menu? The text content is still at the same position as it was when the issue was there, yet it's now hidden below the menu.

Answer 1

The sidebar does not have z-index set so the article content is shown above the menu. You can fix it by adding the below z-index style.

#sidebar {
    background: transparent;
    overflow: visible;
    z-index:1;
}

Demo