Polymer 聚合物对所有儿童都有影响
我正在用它制作一个网站。我现在和你有一些问题。现在我遇到的问题是，单击Polymer 聚合物对所有儿童都有影响,polymer,paper-elements,Polymer,Paper Elements,我正在用它制作一个网站。我现在和你有一些问题。现在我遇到的问题是，单击h2或h3时，即使移除-标记及其关闭选项卡，纹波也不会出现。看看纸张波纹的大小，它涵盖了整个，所以这不应该是问题所在 此外，在填充区域中的下单击也会产生波纹 <div class="album-header" vertical layout on-tap="{{albumTapped}}"> <paper-ripple class="recenteringTouch" fit></pape
h2h3纸张波纹的大小<div class="album-header" vertical layout on-tap="{{albumTapped}}">
<paper-ripple class="recenteringTouch" fit></paper-ripple>
<content select="img"></content>
<div class="description">
<content select="h2"></content>
<content select="h3"></content>
</div>
</div>
我已经做了一些进一步的测试，并缩小了问题的范围。请看一个例子。将样式应用于子元素不会产生任何问题，除非还指定了不透明度。在链接中给出的示例中，绿色文本具有不透明度。单击此文本不会为我生成涟漪（在Chrome 36中运行）。（绿色的指定与此无关，只是为了便于识别）。单击
z-index<div class="album-header" vertical layout on-tap="{{albumTapped}}">
<paper-ripple class="recenteringTouch" fit></paper-ripple>
<content select="img"></content>
<div class="description">
<content select="h2"></content>
<content select="h3"></content>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel='import' href='http://www.polymer-project.org/0.8/components/paper-ripple/paper-ripple.html'>
<script>console.clear()</script>
</head>
<body>
<style>
album-small {
width: 200px;
margin: 10px;
}
</style>
<div layout horizontal>
<album-small>
<h2>The Shatner</h2>
<h3>An interminable rambling spoken word piece.</h3>
</album-small>
<album-small>
<h2>What</h2>
<h3>What wat what wat what what wat</h3>
</album-small>
</div>
<polymer-element name='album-small' noscript>
<template>
<style>
.album-header {
/* Note: relative positioning seems necessary
for paper-ripple. */
position: relative;
padding: 10px;
height: 200px;
z-index: 100;
}
</style>
<div class="album-header" vertical layout>
<paper-ripple class='recenteringTouch' fit></paper-ripple>
<content select="img"></content>
<div class="description">
<content select="h2">hi</content>
<content select="h3">hi</content>
</div>
</div>
</template>
</polymer-element>
</body>
</html>
JS-Bin
控制台清除（）
小相册{
宽度：200px；
利润率：10px；
}
破碎机
没完没了的漫无边际的口语。
什么
什么？什么？什么？什么
.相册标题{
/*注：相对定位似乎是必要的
用于纸张波纹*/
位置：相对位置；
填充：10px；
高度：200px；
z指数：100；
}
你好
你好
paper-ripple{
z-index:10;
}
以下是尝试为包含的div“album header”指定一个“position:relative”，这解决了我的问题：
.album-header {
position: relative;
}
在这个问题中找到了这个解决方案：您能提供更多的上下文来重现这个问题吗，最好是使用jsbin？我在jsbin中玩了一会，想出了一个似乎工作正常的方法：Fwiw，在Peter的例子中，
position:relativefitpaper-ripple