英文:
Correct absolute DOM element top/height
问题
以下是翻译好的内容：
在此有一个示例 https://jsfiddle.net/90ykbw8x/
我想让B与C重叠，所以我将位置设置为绝对定位。但是，您可以很容易地看到它们并没有重叠。使用 e.getBoundingClientRect().top，我看到在我的实际 HTML 页面中它大约偏离了3像素。如何让顶部/Y轴相同？
<div class="A">
<pre class="B">测试</pre>
<pre class="C">测试</pre>
</div>
CSS:
.A pre {
line-height: 1.3em;
margin: .25em;
}
.B {
position: absolute;
color: red;
}
.C {
//padding-left: 30px;
}
英文:
Below has an example https://jsfiddle.net/90ykbw8x/
I'd like B to overlap with C so I set the position to absolute. However you can easily see it doesn't overlap. With e.getBoundingClientRect().top I see it's roughly 3 pixels off in my real html page. How do I get the top/Y axis to be the same?
<div class="A">
<pre class="B">Test</pre>
<pre class="C">Test</pre>
</div>
CSS:
.A pre {
line-height: 1.3em;
margin: .25em;
}
.B {
position:absolute;
color:red;
}
.C {
//padding-left: 30px;
}
答案1
得分: 0
将以下内容翻译为中文：
将 display: flex | flow-root | grid | inline-block | etc... 设置为适应 <pre> 的 margin：
.A {
position: relative;
display: flex;
}
.A pre {
line-height: 1.3em;
margin: .25em;
}
.B {
position: absolute;
color: red;
}
<div class="A">
<pre class="B">Test</pre>
<pre class="C">Test</pre>
</div>
英文:
set display: flex | flow-root | grid | inline-block | etc... to account for the <pre> margin:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.A {
position: relative;
display: flex;
}
.A pre {
line-height: 1.3em;
margin: .25em;
}
.B {
position: absolute;
color: red;
}
<!-- language: lang-html -->
<div class="A">
<pre class="B">Test</pre>
<pre class="C">Test</pre>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论