Hello Haris,
Here's a simple example on how to implement what you want:
<
div
style
=
"position: relative;"
>
<
telerik:RadRotator
ID
=
"RadRotator1"
runat
=
"server"
ItemHeight
=
"100px"
ItemWidth
=
"50px"
Height
=
"100px"
Width
=
"200px"
>
<
Items
>
<
telerik:RadRotatorItem
BorderColor
=
"Black"
BorderStyle
=
"Solid"
BorderWidth
=
"1px"
Height
=
"100px"
Width
=
"50px"
>
<
ItemTemplate
>
Some text content 1
</
ItemTemplate
>
</
telerik:RadRotatorItem
>
<
telerik:RadRotatorItem
BorderColor
=
"Black"
BorderStyle
=
"Solid"
BorderWidth
=
"1px"
Height
=
"100px"
Width
=
"50px"
>
<
ItemTemplate
>
Some text content 2
</
ItemTemplate
>
</
telerik:RadRotatorItem
>
<
telerik:RadRotatorItem
BorderColor
=
"Black"
BorderStyle
=
"Solid"
BorderWidth
=
"1px"
Height
=
"100px"
Width
=
"50px"
>
<
ItemTemplate
>
Some text content 3
</
ItemTemplate
>
</
telerik:RadRotatorItem
>
<
telerik:RadRotatorItem
BorderColor
=
"Black"
BorderStyle
=
"Solid"
BorderWidth
=
"1px"
Height
=
"100px"
Width
=
"50px"
>
<
ItemTemplate
>
Some text content 4
</
ItemTemplate
>
</
telerik:RadRotatorItem
>
<
telerik:RadRotatorItem
BorderColor
=
"Black"
BorderStyle
=
"Solid"
BorderWidth
=
"1px"
Height
=
"100px"
Width
=
"50px"
>
<
ItemTemplate
>
Some text content 5
</
ItemTemplate
>
</
telerik:RadRotatorItem
>
<
telerik:RadRotatorItem
BorderColor
=
"Black"
BorderStyle
=
"Solid"
BorderWidth
=
"1px"
Height
=
"100px"
Width
=
"50px"
>
<
ItemTemplate
>
Some text content 6
</
ItemTemplate
>
</
telerik:RadRotatorItem
>
<
telerik:RadRotatorItem
BorderColor
=
"Black"
BorderStyle
=
"Solid"
BorderWidth
=
"1px"
Height
=
"100px"
Width
=
"50px"
>
<
ItemTemplate
>
Some text content 7
</
ItemTemplate
>
</
telerik:RadRotatorItem
>
</
Items
>
</
telerik:RadRotator
>
<
div
style
=
"position:absolute;top:30px;left:50px;z-index:500;background-color:Green;height: 100px;width:100px;"
>
This is overlapping rotator
</
div
>
</
div
>
The basic premise is that you need to wrap the RadRotator and the image that will overlap it inside of a div with the position set as relative (this is necessary in order for the overlapped image to be positioned correctly within the div). The next step is to add the image that will be overlapped and set the position to absolute, set the z-index (in this case I made it 500, so it shows over the RadRotator) and then adjust the top and left properties to position it over the RadRotator.
I hope that helps.