我正在尝试创建一个悬挂在页面上的block元素上的info标签,但是在正确定位时遇到了一些麻烦。要了解我要做什么,请参阅附件中的图像。内容块实际上是页面上的右侧列。



<div class="contentblock">
  <span class="tag">tag</span>
</div>

div.contentblock{
  width: 575px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  min-height: 300px;
  display: block;
  position: relative;
  padding: 15px;
  ...
}

span.tag{
  font-size: 14px;
  margin-left: 495px;
  color: rgba(65,65,66,0.6);
  display: inline-block;
  text-align: center;
  text-transform: lowercase;
  position: absolute;
  margin-top: 115px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 5px;
  background: #fff;
  margin-bottom: -145px;
  min-width: 60px;
  width: auto !important;
  white-space: nowrap;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform: rotate(90deg);
  border: 2px solid rgba(65,65,66,0.5);
  border-bottom: 0;
}


这种工作-附着的图像实际上是该图像的结果,但是效果不佳,因为标签的水平放置似乎受标签长度的影响。 <span pushes>中的较长文本向右偏移(它也应按垂直方向垂直向下扩展)。因此,标签元素上的半任意边距-恰好适用于一个特定的文本字符串。

我想我要走错路了。有什么更有效的方法来实现这一目标?

最佳答案

由于未指定变换原点,因此默认为元素的中间。结果,更改文本量将使中间偏移并导致转换发生变化。

您应该为固定的内容(例如左上角)指定一个transform-origin(以及所有供应商扩展名),然后根据该位置进行定位。

请注意,-ms-transform也是完美的功能。

10-05 20:47
查看更多