聚合物1.0紙卡在背景（位置：固定）

我有一個紙卡和紙卡內的搜索字段是位置固定，所以我可以通過包含其他紙卡聚合物1.0紙卡在背景（位置：固定）

鐵列表滾動

但是，當我向下滾動搜索卡時，其他卡在它前面。

我已經嘗試過溢：搜索卡上可見/可見光重要/自動和隱藏/隱藏重要的結果卡但什麼也沒有改變

的高程屬性似乎是化妝品只的！ žATTR似乎是一樣的高度

繼承人我的代碼：

HTML指數

<!doctype html> 
<html> 
<head> 
    <!-- 1. Load webcomponents-lite.min.js for polyfill support. --> 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"> 
    </script> 

    <meta charset="utf-8"> 

    <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html"> 
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html"> 
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> 
    <link rel="import" href="bower_components/iron-icons/iron-icons.html"> 
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> 
    <link rel="import" href="own_elements/top-hundred-cards.html"> 
    <link rel="import" href="bower_components/paper-styles/paper-styles.html"> 
    <link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html"> 
    <link rel="import" href="bower_components/paper-input/paper-input.html"> 

    <script src="js/jquery-2.1.4.min.js"></script> 
    <script src="js/jquery-scrollstop-master/jquery.scrollstop.min.js"></script> 
    <script src="js/main.js"></script> 

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Condensed' type='text/css'> 
    <link rel="stylesheet" type="text/css" href="css/main.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 
    <title>FreeLV Freifach Community</title> 

</head> 
<body unresolved> 
<paper-drawer-panel> 
    <paper-header-panel drawer> 
    <paper-toolbar> 
     <div class="app-name">Free LV</div> 
    </paper-toolbar> 
    <div> Drawer content... </div> 
    </paper-header-panel> 
    <paper-header-panel main> 

    <paper-toolbar> 
     <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> 
     <div>Find your next elective lecture!</div> 
    </paper-toolbar> 

    <div id="mainContent"> 
     <div id="SearchBarContainer"> 
      <paper-card id="SearchBar" animatedShadow="true" elevation="2"> 
      <div class="horizontal layout" id="SearchBarContent"> 
       <div class="flex"> 
        <paper-input-container no-label-float id="SearchInput"> 
        <paper-icon-button prefix icon="search"></paper-icon-button> 
         <label>Search...</label> 
         <input is="iron-input"></input> 
        <paper-icon-button suffix icon="clear"></paper-icon-button> 
        </paper-input-container> 
       </div> 
       <div id="SearchOptionsContainer"> 
        <paper-icon-button icon="settings" id="SearchOptions"></paper-icon-button> 
       </div> 
      </div> 
      </paper-card> 
     </div> 

     <div style="width:inherit;"> 
     <top-lvs></top-lvs> 
     </div> 
    </div> 
    </paper-header-panel> 
</paper-drawer-panel> 

</body> 
</html>

個

HTML結果卡

<!doctype html> 
<link rel="import" href="../bower_components/iron-list/iron-list.html"> 
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> 
<link rel="import" href="../bower_components/paper-card/paper-card.html"> 
<link rel="import" href="../bower_components/paper-material/paper-material.html"> 
<link rel="import" href="../bower_components/paper-progress/paper-progress.html"> 
<link rel="import" href="../bower_components/polymer/polymer.html"> 

<dom-module id="top-lvs"> 
    <template> 
     <center> 
      <iron-ajax url="/app/fetch" last-response="{{data}}" auto></iron-ajax> 
      <iron-list id="lvList" items="[[data]]" as="item" style="height:100vh; width:inherit; overflow-y:hidden;"> 
      <template> 
       <div style="padding-top: 2%; width:100%;"> 
       <paper-card heading=[[item.name]] animatedShadow="true" elevation="1" class="lvcard"> 
        <div class="card-actions"> 
         <table style="width:100%"> 
          <tr> 
          <td><span>[[item.ects]]</span> ECTS</td> 
          <td><span>[[item.lvType]]</span></td> 
          </tr> 
          <tr> 
           <td> 
           Preis/Leistung<br> 
           <paper-progress value=[[item.ectsHardness]]></paper-progress> 
          </td> 
          <td><span>[[item.uni]]</span></td> 
          </tr> 
         </table> 
        </div> 
       </paper-card> 
       </div> 
      </template> 
      </iron-list> 
     </center> 
    </template> 
    <script> 
    Polymer({ 
     is: "top-lvs" 
    }); 
    </script> 

</dom-module>

CSS

body { 
    font-family: 'Roboto Condensed', sans-serif; 
    background-image: url(../img/diamond_upholstery.png); 
    background-repeat: :repeat; 
    width: calc(100% - 1em); 
    overflow-y: hidden; 
} 

.app-name { 
    font-size: 200%; 
} 

paper-toolbar.paper-toolbar-0 { 
    background: #4CAF50; 
    color: #ffffff; 
} 

td,tr { 
    padding: 4%; 
} 

#SearchBarContainer{ 
    height: 4em; 
    margin-top: 1em; 
    margin-right: auto; 
    margin-left: auto; 
} 

.lvcard, #SearchBarContainer{ 
    width: 30em; 
} 

#SearchBar { 
    position: fixed; 
    width: inherit; 
} 

#SearchInput label{ 
    font-size: 25px; 
} 

#SearchInput input{ 
    font-size: 25px; 
} 

#SearchOptionsContainer { 
    padding: 8px 0; 
} 

#ToolbarContainer { 
    width: 100%; 
} 

#HeaderContainer { 
    width:inherit; 
    position: fixed; 
} 

#mainContent { 
    width:100%; 
}

這是它的外觀

http://imgur.com/a/2Jm8B

來源

2015-08-21 Florian Schneider

當粘貼大量代碼時，請考慮從plunker或jsbin提供工作示例。 –

聚合物元素可以做到這一點嗎？ –

是的。看看我最近對聚合物的回答。 –

的問題是沒有直接關係的聚合物，但到CSS。

的paper-card包含搜索欄需要有更高的z-index比其他paper-card元素：

#SearchBar { 
    position: fixed; 
    width: inherit; 
    z-index: 10; 
}

的paper-card的elevation屬性只指定了卡滴，沒怎麼出現的陰影外觀當他們堆疊在一起時。

來源

2015-08-24 11:49:31 david1995

謝謝！正是我需要的 –

聚合物1.0紙卡在背景（位置：固定）

回答

相關問題