码迷,mamicode.com
首页 > 其他好文 > 详细

position left50% transition:translate(-50%) 未指定元素的宽度 内容挤下问题

时间:2019-12-08 15:35:33      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:mic   size   alt   add   nsf   text   bug   tips   form   

没有指定长度width的情况

使用position:absolute left:50% transform:translateX(-50%)

技术图片

bug:当文字宽度超过屏幕一般以上的时候,文字会被挤下。

原始代码:

    <div class="tips">让身边的 “Ta” 们更了解你的货车生活</div>
    .tips{
      position: absolute;
      bottom: 20.4rem;
      left:50%;
      transform: translateX(-50%);
      text-align: center;
      color: #FFC962;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #FFC962;
      z-index: 2;
      font-size: 1.2rem;
      display: flex;
      justify-content: center;
    } 

使用flex后

使用flex positon可以和flex连用

    <div class="tips"><div>让身边的 “Ta” 们更了解你的货车生活</div></div>
    .tips{
      position: absolute;
      bottom: 20.4rem;
      width: 100%;
      color: #FFC962;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #FFC962;
      z-index: 2;
      font-size: 1.2rem;
      display: flex;
      justify-content: center;
    }

原因:没有设置宽度的div在position:absolute,left:50%自动设置了自己的宽度为父宽度的一半。所以上边内容超过父级宽度的一半的时候内容挤下,而内容小于父级宽度的一半的时候,正常显示。

当设置了元素的宽度,无论是否超过父级的一半都正常显示

补充: 

1.一个已设置宽高的块状元素设置position:absolute后会保持他原来宽高

2.一个内联元素设置position:absolute会自动转为一个块状元素

3.一个没有设置宽高的块状元素position:absolute,top:0;left:0,默认宽度是父的宽度

4.一个内联元素position:absolute,top:0;left:0,它默认宽度是父的宽度.

5.一个元素position:absolute,left:50%

没有设置宽度的div在position:absolute,left:50%自动设置了自己的宽度为父宽度的一半.

当有宽度的div设置了position:absolute,left:50%以后,它的宽度正常显示.

 

position left50% transition:translate(-50%) 未指定元素的宽度 内容挤下问题

标签:mic   size   alt   add   nsf   text   bug   tips   form   

原文地址:https://www.cnblogs.com/zjx304/p/10277723.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!