聚合物波纹波及所有儿童
聚合物波纹波及所有儿童
提问于 2014-07-19 13:12:49
我正在使用聚合物创建一个网站。我目前对纸波纹有一些问题。现在我遇到的问题是，在单击h2或h3时，甚至在删除<div class='description'>-tag和关闭选项卡时，都不会出现连锁反应。从paper-ripple的大小来看，它涵盖了整个<div class='album-header'>，所以这不应该是问题所在。
同时，点击<div class='description'>下的填充区域，也会产生连锁反应。
<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中)。(绿色的分配与此无关，只是为了让它更容易被发现)。点击<h3>标签周围的任何地方都会产生连锁反应。
回答 3
Stack Overflow用户
发布于 2015-04-18 04:32:13
您必须在外部容器上增加z-index，这样所有的<content>都会低于它。例如：
<!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>Stack Overflow用户
发布于 2015-07-23 11:25:58
尝试给包含的div“相册标题”一个“位置:相对”这解决了我的问题：
.album-header {
position: relative;
}这个解决方案是在这个问题中找到的：http://goo.gl/a3qccA
Stack Overflow用户
发布于 2015-05-11 20:05:09
看起来它可以很容易地固定，增加纸波纹的z指数，只需将其放入聚合物元素样式标签：
paper-ripple{
z-index:10;
}这是JSBin
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24840780
复制相关文章
相似问题
腾讯云开发者
