transform 中含有 position: fixed 失效的问题解决

今天爱分享给大家带来transform 中含有 position: fixed 失效的问题解决,希望能够帮助到大家。
话不多说,直接上代码!!!

原代码是这样的

.down-icon {
    width: .27rem;
    height: 0.27rem;
    border-top: .02rem solid #6D3942;
    border-left: .02rem solid #6D3942;
    transform: rotate(45deg);
    position: fixed;
    left: 0;
    bottom: 0.4rem;
    left: 0;
    right: 0;
    margin: auto;
}

结果没有任何反应,其中的transform: rotate(45deg);并没有管用

解决办法:


position: fixed;放在父元素内,添加一个子元素transform: rotate(45deg);放在子元素内

.down-icon {
    width: .27rem;
    height: 0.27rem;
    position: fixed;
    left: 0;
    bottom: 0.4rem;
    left: 0;
    right: 0;
    margin: auto;
    i{
      display: block;
      width: 100%;
      height: 100%;
      border-top: .02rem solid #6D3942;
      border-left: .02rem solid #6D3942;
      transform: rotate(45deg);
    }
}

此时效果可以实现

 

人已赞赏
前端

vue scoped css 深度选择器 父组件的样式将渗透到子组件中

2020-10-17 0:03:38

前端

vue 打包后如何修改接口地址 提供 config.js 进行配置

2020-10-18 23:58:08

'); })();