个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
在position:relative元素box中，我有
top:0 处的绝对定位元素 parent，带有几个静态 p 和 h1..h6里面。这些可能都有不同的边距/填充值。目标是设置第二个元素的 y 值，使其与 1 中的集合中的对应元素完全重叠。
我采用了这种方法(使用闭包，但实际上可以使用任何东西)，从元素数组 content 开始生成列表 #1:
goog.dom.removeChildren(parent);
for (var i=0; i<content.length; i++) {
offsets.push(parent.offsetHeight);
goog.dom.appendChild(parent, content[i]);
}
return offsets;
然后，使用来自 offsets 的值:
var matchedElm = source[i].cloneNode(true);
goog.style.setStyle(matchedElm, {"top": offsets[i] + "px"});
goog.dom.appendChild(box, matchedElm);
现在这适用于各种填充和 margin=0，但是当 p 和 h1..6 上的边距不为 0 时失败>。我也尝试过“scrollHeight”，但似乎没有考虑到边距。然后，我尝试直接从列表 #1 中的呈现元素获取 offsetTop，但这似乎产生与上述填充 offsets 过程完全相同的结果。
如何使重叠起作用？我正在寻找原生 javascript 或闭包库解决方案。
最佳答案
您正在寻找的可能是 goog.style.getPageOffset 并且因为您的重叠元素绝对定位在顶部设置中，您可能必须扣除要重叠的元素的上边距使用goog.style.getMarginBox。这是一些示例代码:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="game" data-something="hello"></div>
<script type="text/javascript" src="js/goog/base.js"></script>
<script type="text/javascript">
goog.require("goog.dom");
goog.require("goog.style");
</script>
</body>
<div id="contentToOverLap" style="position:absolute;top:30px;left:30px">
<h1 style="margin:10px;padding:2px">h1 10px mar and 2px pad</h1>
</div>
<div id="overlappingContent" style="display:inline">
<h1 style="color:red;margin:15px;padding:2px;position:absolute">
h1 15px mar and 2px pa
</h1>
</div>
<script type="text/javascript">
(function () {
var pH = goog.dom.$("contentToOverLap").children[0];
var cH = goog.dom.$("overlappingContent").children[0];
var box = goog.style.getPageOffset(pH);
console.log("box is:", box);
var mar = goog.style.getMarginBox(cH);
console.log("mar is:", mar);
var t = box.y - mar.top;
var l = box.x - mar.left;
goog.style.setStyle(cH, { "top": t + "px", "left": l + "px" });
})();
</script>
</html>
关于javascript - 如何完美重叠两个(相同的)元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17286537/
26
4
0
为了加速测试字谜字符串的快速输出行为，我 came up with基于质数的哈希方案——尽管它看起来像 I wasn't the first . 基本思想是将字母映射到素数，并计算这些素数的乘积。字母
我使用 Perfect Framework 创建了一个 Swift 3.0 服务器。一切都按预期进行得很好，但我正在尝试了解是否有更好的方法来做一些事情。 来自 iOS 背景，我知道总是在不同的线程中
我有一个固定大小的正方形 div，希望使用 CSS 在其中放置任意大小的图像，以便它在水平和垂直方向上都居中。横向很容易: .container { text-align: center } 对于垂直
程序员离不开终端，配置一个好看又好用的终端，可以提高工作效率. 本篇文章记录了使用 Oh My Zsh + PowerLevel9k + zsh插件 快速配置Ubuntu下默认终端的过程. 我们在
在请求处理程序中，处理例如获取 https://example.com/collections/1或 POSThttp://0.0.0.0:8080/collections 如何获取服务器地址 htt
我正在使用 perfect 和 SQLite司机和StORM作为连接器。我可以一一保存(创建)多行。为了使其更快，我想一次创建多行，我该怎么做？ 最佳答案 从完美的 SQLite-StORM 和 Pe
这是我在这里的第一篇文章，所以我希望我提供所有正确的信息。 我目前正在开发一个简单的菜单应用程序，它有一个按钮控制数组(使用 MSDN 建议的控制数组的变通方法)，我很难重新调整表单大小和将按钮居中。
在 androidplot XYPlot 中，如果您有较大的值(许多数字)和/或较大的字体大小，则 Y 轴上的刻度标签会被剪裁。这个(以及 X 轴上的类似问题)之前已经在这些问题中讨论过: Range
注意:我遗漏了不相关的代码 所以我目前正在研究 CCC 1996 P1，这个问题的全部目的是能够计算一个整数输入是完美数、不足数还是充数。我上面列出的代码可以工作，但是我认为它太慢了。该代码会迭代每个
我需要什么 我需要一个产生双射输出的算法。我有一个 31 位输入，需要一个伪随机 31 位输出。 我考虑过的 CRC 在其位宽内是双射的。 我查看了 Google 并找到了多项式，但找不到表格或算法。
我在 Ubuntu 14.04.1、clang-3.8 上使用 PerfectSwift我使用的是 Perfect，一切正常，但现在，我不能再编译了(但它可以在我的 mac 上编译) 错误日志是 /h
如果您对分表有以下痛点那么不妨试试我这边开源的框架sharding-core ，是否需要无感知使用分表组件，是否需要支持abp，是否需要支持自定义分表规则，是否需要支持自定义分表键，是否需要支持特定
我正在尝试确定我的 crc 与“ 理想 ”32 位 crc 的比较。 因此，我运行我的 crc 超过 100 万个完全随机的数据样本并收集了碰撞数量，我想将此数字与我可以从“ 理想 ”crc 中预期的
我正在开发一个项目，需要验证我的 URL，并偶然发现了以下正则表达式模式； /(((http|ftp|https):\/{2})+(([0-9a-z_-]+\.)+(aero|asia|biz|cat
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 4 年前。 Improve
我正在创建一个需要居中于中间的圆形网站。背景由围绕中心图像的圆圈组成。每当我以全屏(F11 快捷键)查看我的网站时，无论我的屏幕分辨率如何，它都完美居中。 如果我在没有全屏显示的情况下查看我的网站，我
所以我有一个网站，在开发人员工具中测试响应能力时看起来很棒，但在 iPhone 本身上实际测试时却没有居中并且看起来有些破烂。 什么会导致这种情况，如果我无法使用 iPhone(在我的 android
我有一个内部类，它扩展了 AbstractTableModel。 import javax.swing.table.AbstractTableModel; public class MyClass e
所以我正在使用 Perfect 服务器开发一个将值返回给客户端的应用程序。目前，它需要从另一个 API 下载一些数据，对其进行处理，然后将其发送给客户端。 然而，出于某种原因，它在 OSX 中编译良好
我有一些 CSS 按钮。 “按钮”效果是通过在 anchor 标记中使用固定大小的 元素来完成的，并且 css 规则以 a span:active 、 a span:hover 的形式显示按钮状态。
我是一名优秀的程序员,十分优秀！