与内联元素相关的绝对位置

我想在一些更长的文本中直接在另一个单词的上方添加单词。与内联元素相关的绝对位置

This fiddle没有达到它（在Firefox和Chrome中检查），“bar”位置与“foo”无关，即使“foo”有position: fixed。为了让事情变得更加诡异，当我检查Firefox中的“bar”元素并关闭position: absolute并再次打开它时，“bar”会移到“foo”上方，所以显然有些未定义的行为。

这里的小提琴代码：

.node { 
 
    position: relative; 
 
    display: inline; 
 
} 
 

 
.tip { 
 
    position: absolute; 
 
    top: -12px; 
 
    font-size: 9px; 
 
    line-height: 12px; 
 
    color: #c83025; 
 
}

aaaaaaa 
 
<div class="node"> 
 
    foo 
 
    <div class="tip">bar</div> 
 
</div>

来源

2017-07-18 janek37

使用display: inline-block;上.node（内联元素不能有position: relative，直列块可以）

.node { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.tip { 
 
    position: absolute; 
 
    top: -12px; 
 
    font-size: 9px; 
 
    line-height: 12px; 
 
    color: #c83025; 
 
    left:0; 
 
    right:0; 
 
    text-align: center; 
 
}

aaaaaaa 
 
<div class="node"> 
 
    foo 
 
    <div class="tip">bar</div> 
 
</div>

顺便说一句：我添加了一些代码来将绝对定位的单词与其“父单词”相关联。

来源

2017-07-18 17:05:12 Johannes

谢谢！只要我可以使用'display：inline-block'，就可以工作。我发现在'.tip'上使用'left：0'似乎也能工作，至少在Firefox和Chrome中（我的情况就足够了）。 – janek37

您可以通过position: relative和负数margin-left和top来实现此目的。而不是top您可以使用transform: translateY，其中一些百分比如transform: translateY(-100%)。

演示：

body { 
 
    /* just for demo */ 
 
    margin: 20px; 
 
} 
 

 
.node { 
 
    position: relative; 
 
    display: inline; 
 
} 
 

 
.tip { 
 
    /* don't move to next line but allow margin-setting */ 
 
    display: inline-block; 
 
    position: relative; 
 
    color: #c83025; 
 
    top: -15px; 
 
    margin-left: -25px; 
 
}

aaaaaaa 
 
<div class="node"> 
 
    foo 
 
    <div class="tip">bar</div> 
 
</div> 
 
some other text

来源

2017-07-18 17:12:18

与内联元素相关的绝对位置

回答

相关问题