CSS transform:scale(2)+ position:absolute + right:0px无法正常工作

有人

我注意到,这right:0px是错误地定位元素。transform:scale不会重新计算元素的宽度。

有没有办法正确地将此元素粘贴到右侧?

HTML:

<div id="stick_me">
    blah blah blah<br />
    blah blah blah<br />
    blah blah blah<br />
</div>

CSS:

#stick_me {
    border:1px solid red;
    display:inline-block;
    transform:scale(3);
    position:absolute;
    right:0px;
    top:0px;
}

谢谢。

乔恩·P

您想使用transform-originhttps://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)属性设置为top right将元素定位到顶部和右侧时,需要从那里进行缩放,即向下和向左缩放。

#stick_me {
  border:1px solid red;
  display:inline-block;
  transform:scale(3);
  position:absolute;
  right:0px;
  top:0px;
  transform-origin:top right;
}

演示版

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS: Wrong position of "transform: scale();" container children

来自分类Dev

CSS中“ position:absolute”的用法

来自分类Dev

通过CSS属性“ transform:scale(0.5)”进行缩放的角度CDK拖放无法正常工作

来自分类Dev

为什么我的position:absolute,bottom:0 CSS样式将div放在顶部的某个位置?

来自分类Dev

CSS-徽标顶部= 0px

来自分类Dev

CSS-徽标顶部= 0px

来自分类Dev

CSS:float:right无法正常工作

来自分类Dev

CSS - Transition width broken when setting a fixed (or absolute) position

来自分类Dev

通过添加CSS来删除position:absolute属性

来自分类Dev

CSS-在使用“ position:absolute”的div下方放置“ normal” div?

来自分类Dev

-moz-transform:scale(2)是否等效于CSS`zoom:2`?

来自分类Dev

`-moz-transform:scale(2)`等同于CSS`zoom:2`吗?

来自分类Dev

CSS中的声明是什么:font:0px / 0px a;

来自分类Dev

CSS中的声明是什么:font:0px / 0px a;

来自分类Dev

CSS“ transform:scale()”使元素在容器外部增长

来自分类Dev

Yii2-小部件的CSS无法正常工作

来自分类Dev

CSS not()无法正常工作

来自分类Dev

CSS:not()无法正常工作

来自分类Dev

CSS:not()无法正常工作

来自分类Dev

CSS:无法正常工作

来自分类Dev

CSS:not()无法正常工作

来自分类Dev

CSS在不使用position:absolute的情况下创建图层(使容器足够容纳所有图层)

来自分类Dev

CSS:无需使用position:absolute就可以将子级与父级独立地定位

来自分类Dev

CSS 子菜单错误:ul#[class] -> position: absolute; 没有重叠或错误的菜单宽度

来自分类Dev

如何在不使用 position:absolute 的情况下在 css 中实现这种样式?

来自分类Dev

为什么CSS calc(100%-250px)无法正常工作?

来自分类Dev

.css()jQuery无法正常工作

来自分类Dev

CSS过渡无法正常工作

来自分类Dev

CSS过渡无法正常工作

Related 相关文章

  1. 1

    CSS: Wrong position of "transform: scale();" container children

  2. 2

    CSS中“ position:absolute”的用法

  3. 3

    通过CSS属性“ transform:scale(0.5)”进行缩放的角度CDK拖放无法正常工作

  4. 4

    为什么我的position:absolute,bottom:0 CSS样式将div放在顶部的某个位置?

  5. 5

    CSS-徽标顶部= 0px

  6. 6

    CSS-徽标顶部= 0px

  7. 7

    CSS:float:right无法正常工作

  8. 8

    CSS - Transition width broken when setting a fixed (or absolute) position

  9. 9

    通过添加CSS来删除position:absolute属性

  10. 10

    CSS-在使用“ position:absolute”的div下方放置“ normal” div?

  11. 11

    -moz-transform:scale(2)是否等效于CSS`zoom:2`?

  12. 12

    `-moz-transform:scale(2)`等同于CSS`zoom:2`吗?

  13. 13

    CSS中的声明是什么:font:0px / 0px a;

  14. 14

    CSS中的声明是什么:font:0px / 0px a;

  15. 15

    CSS“ transform:scale()”使元素在容器外部增长

  16. 16

    Yii2-小部件的CSS无法正常工作

  17. 17

    CSS not()无法正常工作

  18. 18

    CSS:not()无法正常工作

  19. 19

    CSS:not()无法正常工作

  20. 20

    CSS:无法正常工作

  21. 21

    CSS:not()无法正常工作

  22. 22

    CSS在不使用position:absolute的情况下创建图层(使容器足够容纳所有图层)

  23. 23

    CSS:无需使用position:absolute就可以将子级与父级独立地定位

  24. 24

    CSS 子菜单错误:ul#[class] -> position: absolute; 没有重叠或错误的菜单宽度

  25. 25

    如何在不使用 position:absolute 的情况下在 css 中实现这种样式?

  26. 26

    为什么CSS calc(100%-250px)无法正常工作?

  27. 27

    .css()jQuery无法正常工作

  28. 28

    CSS过渡无法正常工作

  29. 29

    CSS过渡无法正常工作

热门标签

归档