Image Overlap

3 posts, 0 answers
  1. Haris
    Haris avatar
    7 posts
    Member since:
    Mar 2011

    Posted 23 Nov 2011 Link to this post

    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
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 24 Nov 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Haris
    Haris avatar
    7 posts
    Member since:
    Mar 2011

    Posted 30 Nov 2011 Link to this post

    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>
Back to Top