html - 显示:table element的绝对定位

Question

我正在尝试为焦点上的输入字段创建文本提示 http://jsfiddle.net/krpkm5dc/ . 第一个问题是如何为 position: absolute 元素设置 max-width，我找到了解决方案 - display: table。

 <div class="wrapper">
    <input type="text">
    <div class="hint">
        Lorem ipsum
    </div>
</div>

.wrapper {
    position: relative;
    display: inline-block;
}
.hint {
    color: white;
    background: #333;
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
    max-width: 200px;
}
input:focus ~ .hint {
    display: table;    
}

但是当我试图把它放在右边时，它有奇怪的行为

.hint {   
    right: 100%;    
} 

http://jsfiddle.net/6vxye8q5/ : 右侧与输入的左侧不匹配。为什么它会这样？

Answer 1

我猜您希望 .hint 元素与输入元素具有相同的宽度。

如果您希望 .hint 出现在输入字段的左侧， 将偏移量设置为 left: -100% 和 right: 100%。

如果您希望 .hint 出现在输入字段的右侧， 将偏移量设置为 right: -100% 和 left: 100%。

要完全理解其工作原理，您需要阅读有关如何计算绝对定位元素的偏移量和宽度的 CSS 规范:

引用: http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

您还可以使用边距值将 .hint 元素从输入字段偏移或稍微重叠它，具体取决于您想要如何设置布局样式。

要获得较短提示文本的收缩以适合宽度，请使用 display: inline-table 将文本包裹在一个元素中，并调整 text-align .hint 的相应属性。

.showLeft {
  text-align: right;
}
.showRight {
  text-align: left;
}
.wrapper {
  position: relative;
  display: inline-block;
}
input:focus ~ .hint {
  display: block;
}
.hint {
  position: absolute;
  top: 0;
  display: none;
}
.tableit {
  display: inline-table;
  text-align: left;
  color: white;
  background: #333;
}
.showLeft .hint {
  left: -100%;
  right: 100%;
}
.showRight .hint {
  text-align: right;
  right: -100%;
  left: 100%;
}

<div class="showLeft">
  <div class="wrapper">
    <input type="text">
    <div class="hint">
      <div class="tableit">
        Lorem ipsum
      </div>
    </div>
  </div>
</div>
<br>
<div class="showRight">
  <div class="wrapper">
    <input type="text">
    <div class="hint">
      <div class="tableit">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar
      </div>
    </div>
  </div>
</div>