Image Overlap

[Haris]

Hi,
I am working with div-based pages and RadRotator and wanted to ask the following:
Can any image overlap part of RadRotator with image?

Attached is the requirement:
Black = RadRotator
Red = Image within RadRotator
Green = Overlapping image

I've been playing around with css but with no avail. Any help will be greatly appreciated.

Thanks.

-Haris

[Kevin]

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.

[Haris]

Thanks for the reply Kevin!

I didn't want to use absolute positioning but It seems that will work as well.

Instead, I used the negative margin and it worked out for me.

-Haris

<div style="width:20px; height:35px;position:relative;margin-right:40px;bottom:160px;margin-bottom:-160px;">Some image</div>