Question

我想在一些较长的文字中直接在另一个单词上面加上一个单词。

This fiddle无法实现（在Firefox和Chrome中查看），＆＃34; bar＆＃34;位置与＆＃34; foo＆＃34;无关，即使＆＃34; foo＆＃34;有position: fixed。为了让事情变得更加奇怪，当我检查＆＃34; bar＆＃34; Firefox中的元素并关闭position: absolute，然后再将其打开，＆＃34; bar＆＃34;移动到＆＃34; foo＆＃34;，所以它显然是一些未定义的行为。

这是小提琴的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在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>

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

Answer 2

您可以通过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

<env:Envelope xmlns:env="http://schemas.xmlsoap.org/soap/envelope/" xmlns:soap11-enc="http://schemas.xmlsoap.org/soap/encoding/">
   <env:Header/>
   <env:Body>
      <ws:processNPCMsgResponse env:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" xmlns:ws="http://ws.inpac.telcordia.com/">
         <processNPCMsgReturn>success</processNPCMsgReturn>
         <processNPCMsgReturn1>success1</processNPCMsgReturn1>
         <processNPCMsgReturn1>success2</processNPCMsgReturn2>
      </ws:processNPCMsgResponse>
   </env:Body>
</env:Envelope>

绝对位置与内联元素相关

2 个答案: