个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
47
4
https://jsfiddle.net/6vqbLm5c/29/
HTML:
<div>
<p id="par">paragraph</p>
</div>
CSS:
p {
margin:0;
}
div {
padding: 10px;
}
body {
margin:0;
}
p.offsetTop 返回 10px。我的理解是父元素 div 默认设置了静态位置，并根据 offsetTop documentation offsetTop 是距离最近的相对定位父元素顶部的像素数。那么，为什么即使 p 没有相对定位的父元素，它仍然返回 10px？
最佳答案
区别似乎在于 the description for position: relative :
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of
top,right,bottom, andleft. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position werestatic.
和 the documentation for the visual formatting model :
The normal flow is triggered when the CSS position is set to the value
staticorrelative, and if the CSSfloatis set to the valuenone.
...
Instaticpositioning, triggered by the valuestaticof thepositionproperty, the boxes are drawn at the exact position defined by the normal flow layout.
也就是说，当页面上不存在没有定位的元素时，所有元素都属于“正常流”，每个元素的定位由其每个祖先确定。
这在您申请 margin 时变得很明显至 <body> ; offsetTop增加以适应边距:
var p = document.getElementById('par');
console.log(p.offsetTop)p {
margin: 0;
}
.container {
padding: 20px;
}
body {
margin: 10px;
}<div class="container">
<p id="par">paragraph</p>
</div>并且可以在修改<html>时进一步增强本身:
var p = document.getElementById('par');
console.log(p.offsetTop)p {
margin: 0;
}
.container {
padding: 20px;
}
body {
margin: 10px;
}
html {
padding: 5px;
}<div class="container">
<p id="par">paragraph</p>
</div>因此，offsetTop增加以容纳祖先，不管没有定位的祖先。
关于HTMLElement.offsetTop 适用于静态父元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51508872/
47
4
0
在 HTML 中，我有一个相对定位的 div。它的边框为 6px。它没有填充。在它是另一个分区。这个 div 没有边距。 我在 Firefox 中查看它。 我做了一个 fiddle ，jsfiddle
我想计算一个 div 元素在另一个 div 元素中的滚动距离。我使用 offsetTop 来实现这一点，但它在我的代码中总是返回 0。我无法弄清楚我在哪里犯了错误。 function getScrol
以下代码执行成功: var $ = document.querySelector.bind(document); function windowScroll() { var elems = [
https://jsfiddle.net/6vqbLm5c/29/ HTML: paragraph CSS: p { margin:0; } div { padding: 10px
我的问题相当简单:如何找到子元素与其父元素(而不是窗口顶部)相比的 offsetTop？ offsetTop 的定义声明该属性将返回子元素从 offsetParent 顶部偏移的值，但这似乎不是在这个
我正在尝试开发一个函数，将 div-Element 移动到与悬停元素相同的高度。 为此，我使用了 offsetTop，但它总是返回 0，我不明白我做错了什么。 $( document ).ready(
我在我的解决方案中使用了 offsetTop 如下。 public getOffsetTop = element => { let offsetTop = 0; while
我正在编写一个小程序，以指定的速度移动 DOM。 当我以每秒 20 像素的速度移动它时，添加到 elem.style.top 的偏移量约为每帧 0.3px。 问题是，当这个offset小于0.5px时
style.top offsetTop 在 chrome 中是 'object DOM Window',它没有给出整数，为什么。我用谷歌搜索了这样的问题，但似乎只有我一个人有这样的问题。 它们在 Fi
FF 和 IE 在子级进入具有溢出和边框的父级时给出不同的 offsetTop。FF 从 offsetTop 值中减去父级的上边框尺寸，所以返回一个负值(经常)；我认为 IE 会返回正确的值。 Tes
如何检测元素的offsetTop变化？以及其他元素的属性.. 这是一个片段，我尝试在测试的 div 上放置一个 MutationObserver，但是当我制作标题 div 时，观察者永远不会被触发>
我有一个不能有滚动条的页面，因此所有内容都必须始终显示在 View 中。在下图中，您可以看到屏幕的基本设置，因此您可以得到它的表示。 因此，有两个 block (1 和 2)。第一个 (1) 是可扩展
为什么是 offsetTop返回 undefined在这个 SVG 元素上？ var svg = document.querySelector('svg') var h1 = document.que
当我在 componentDidMount 中获取元素的 offsetTop 时， react 与在 componentDidUpdate() 中调用时同一元素的 offsetTop 值不同。这是为什
的边距相加
这是代码: var testDiv = document.getElementById("test"); var demoDiv = document.getElementById("demo");
有没有一种方法可以在应用某些 CSS 样式后获取元素的 offsetTop 的值而不实际应用该 CSS？ 例如，如果一个元素的 CSS 当前是: position: absolute; top: 45
我在 div 中有一个输入字段。当我将div的style属性设置为display:none时，div内的输入必须返回offsetTop == 0。在FF、Opera、Safari等中是这种情况，但在I
我正在尝试获取单击的 Accordion 标题在单击后的绝对位置。 问题是，Bootstrap 和我的 jquery 的 Accordion 折叠运动几乎是在同一时刻触发的。发生的情况是我的 jque
您好，我的代码有问题。我正在尝试执行简单的滚动功能，但仍然收到错误。 function pageScroll(el) { var yPos; page = docum
当悬停在跨度上时，我想获取 offsetLeft 和 offsetTop 值，这样我就可以在它附近悬停一些东西。当我这样做时，两个值都为 0。 解决这个问题的更好方法是什么？我正在使用 jQuery。
我是一名优秀的程序员,十分优秀！