Question

我有标题，以某个角度显示并具有此类

<head>
<style type="text/css">

.example2 {
    display:inline-block;
    position:relative;

}

.example {
    position:absolute;
    color:#24c245;
    align:right;
    bottom:50%;
    right:50%;
    margin:0 auto;
  -ms-transform:rotate(-20deg); /* IE 9 */
  -moz-transform:rotate(20deg); /* Firefox */
  -webkit-transform:rotate(-20deg); /* Safari and Chrome */
  -o-transform:rotate(-20deg);
}
    </style>
</head>
<body>
    <div class="example2">
    <img src="images/achievement.png">
    <h4 class="example">hlkjlkjsdfasdfsadfasdfasdfasdfasdfhkjl</h4>
</div>
</body>

标题可能有不同的长度，我认为它总是在屏幕上的同一个地方，但它不断移动和位置取决于长度。我不明白为什么。

Answer 1

我认为它总是在屏幕上的同一个地方

如果您希望它始终位于相对于窗口的相同位置，请使用fixed定位而不是absolute。

absolute定位元素相对于具有static以外位置的第一个父元素定位，只有当不存在这样的父元素时，它才会相对于窗口定位..

更新：根据评论，可以使用transform-origin属性修复此问题

Answer 2

<强> EXAMPLE

position:absolute;    /* or 'fixed' if needed*/
text-align:center;
bottom:50%;
left:0;
right:0;
margin:0 auto;

transform:rotate:(50deg);
-o-transform:rotate(50deg); 
-ms-transform:rotate(50deg); 
-moz-transform:rotate(50deg); 
-webkit-transform:rotate(50deg);

具有文本的绝对位置

2 个答案: