我正在尝试创建一个悬挂在页面上的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
也是完美的功能。