locked
metro javaScript :How to make a FlipView at the bottom RRS feed

  • Question

  • When I use FlipView and other elements on one page.  FlipView always appear at the top level and cover other elements.

    How can I place FlipView on the bottom ?

    And I've tried Z-index , But It does not work.

    Thursday, May 17, 2012 2:07 AM

Answers

  • There are other ways, but here's one:

    <style type="text/css">
        .outer {
            position: relative; /* resets the top, left, right, and bottom porperties of its children */
            background-image: url('yourimage.jpg');
            width: 300px;
            height: 300px;
        }
        .inner {
            position: absolute;
            bottom: 0;
            background-color: rgba(0,0,0,.6);
            padding: 10px;
            color: white;
            width: 280px;
        }
    </style>
    <div class="outer">
        <div class="inner">I cover over the bottom of the image.</div>
    </div>

    Here's another example with adjacent divs, one pretending to be a flipview and the other a label.

    <style type="text/css">
        .flipview {
            position: relative;
            background-image: url('hand.jpg');
            background-size:cover;
            width: 300px;
            height: 300px;
            z-index: 1;
        }
        .label {
            position: relative;
            top: -35px;
            height: 25px;
            bottom: 0;
            background-color: rgba(0,0,0,.5);
            padding: 5px 10px;
            color: white;
            width: 280px;
            z-index: 2;
        }
    </style>
    <div class="flipview">
    </div>
    <div class="label">I cover over the bottom of the image.</div>

    • Edited by Bryan Thomas Friday, May 18, 2012 8:58 PM Add more code
    • Marked as answer by Sith Go Monday, June 11, 2012 9:47 AM
    Friday, May 18, 2012 7:02 PM

All replies

  • Hi Sith,

    You should use css grid to postion your elements:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh452648.aspx

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, May 17, 2012 3:24 PM
    Moderator
  • Hi Sith,

    You should use css grid to postion your elements:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh452648.aspx

    -Jeff


    Jeff Sanders (MSFT)

    Hi~ jpsanders ~    en... the Website that you give me is about  Layout ?

    But you know, en...  I just want to display two “div”  in Overlapping,like this

    The  code  is :

                            <div class="ChapterPage_Div_ChapterItemSectionImagebar"> 
                                <h2><span data-win-bind="textContent: chapterPreviewImage"></span></h2>
                                <div class="ChapterPage_Div_ChapterItemSectionImageImg"></div>
                            </div>
                            <div class="ChapterPage_Div_ChapterItemSectionBackgroundImage"></div>   ——〉This is a  FlipView  to show  background image.

    And  I've tried Z-index in CSS  , But It does not work.

    thanks~  :)



    • Edited by Sith Go Friday, May 18, 2012 10:47 AM
    Friday, May 18, 2012 10:44 AM
  • There are other ways, but here's one:

    <style type="text/css">
        .outer {
            position: relative; /* resets the top, left, right, and bottom porperties of its children */
            background-image: url('yourimage.jpg');
            width: 300px;
            height: 300px;
        }
        .inner {
            position: absolute;
            bottom: 0;
            background-color: rgba(0,0,0,.6);
            padding: 10px;
            color: white;
            width: 280px;
        }
    </style>
    <div class="outer">
        <div class="inner">I cover over the bottom of the image.</div>
    </div>

    Here's another example with adjacent divs, one pretending to be a flipview and the other a label.

    <style type="text/css">
        .flipview {
            position: relative;
            background-image: url('hand.jpg');
            background-size:cover;
            width: 300px;
            height: 300px;
            z-index: 1;
        }
        .label {
            position: relative;
            top: -35px;
            height: 25px;
            bottom: 0;
            background-color: rgba(0,0,0,.5);
            padding: 5px 10px;
            color: white;
            width: 280px;
            z-index: 2;
        }
    </style>
    <div class="flipview">
    </div>
    <div class="label">I cover over the bottom of the image.</div>

    • Edited by Bryan Thomas Friday, May 18, 2012 8:58 PM Add more code
    • Marked as answer by Sith Go Monday, June 11, 2012 9:47 AM
    Friday, May 18, 2012 7:02 PM
  • I'm still not seeing where the WinJS.UI.FlipView comes into play...
    Friday, May 18, 2012 7:22 PM