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

没有指定长度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%以后,它的宽度正常显示.

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

时间: 2024-11-07 01:27:08

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

ios transition translate 闪屏问题总结

webkit在绘制页面时会将结构分为各种层,当层足够大时就会变成很大的平铺层.这样一来webkit在每次页面结构发生变化时不需要都渲染整个页面而是渲染对应层了,这对渲染速度来说相当的重要.webkit会给各种层分配一定大小的"后备存储器"在内存里缓存起来,这就是绘制层的上下文,通过这个上下文就可以很容易的实现各种效果(动画,3D变换等),"后备存储器"内存占用大小不仅依层而定,跟设备和显示方式也是有关的,假设这在普通屏幕下是1:1的,但在Retina屏幕下则是1:2

transform:translate(-50%,-50%)实现水平垂直居中

translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.. 当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置 translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置. 与负margin-left和margin-top实现居中不同的是,margin-left必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中,tranlate()函数中

transform: translateY(-50%) 实现元素垂直居中效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .center { 8 height: 500px; 9 background:#888; 10 } 11 .center p{ 12 background: #faf

兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素

IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; bord

IE6 下关于Position:absolute;属性对同级元素的影响问题

今天小码哥做一个专题页面的时候,碰到一个关于IE6下position:absolute:属性对同级元素的margin属性有影响的问题.虽然,作为前端人员,IE6下的Bug问题,始终让人头疼不已.但生活在Zhong国的码民们只能继续忍受. 言归正传,是什么问题呢? 即:假如在一个设有position:relative:相对定位属性的div盒子里,同时放另外两个div块级元素layer2,layer3.layer2设有position:absolute:属性,layer3设有margin:30px

js 元素高度宽度整理

1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和clientHeight 该属性指的是元素的可视部分宽度和高度,即padding+content,如果没有滚动条,即为元素设定的高度和宽度(padding+content),如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高 css: <style> .one{ width:

浮动元素的兼容以及ie6下li标签的部分兼容性问题

清除浮动的方法有许多比较常用的是 .clear{zoom: 1;} .clear:after{content: "";display: block;clear: both;} after伪类元素末尾添加内容Ie6,7不兼容可以用zoom来解决(zoom缩放会触发ie下的haslayout使元素根据自身内容计算宽高但火狐不支持但可以通过after伪类解决) 两者结合解决的浏览器不兼容的问题: ie6下li标签的部分兼容性问题: 可以通过给li标签加 vertical-align: top

透彻理解块级元素的宽度

块级元素和行内元素 CSS把处在正常文档流中的不同html元素区分为块级元素(block element)和行内元素(inline element).一般来说,所谓块级元素就是指当它们显示在浏览器中时,会在自身前后各插入一个空行,而使自身在页面中占据一个相对独立的块状区域的元素.因此,HTML文档中连续的块级元素的典型显示方式就是"堆叠".块级元素的例子有h1到h6.div.p等.而行内元素则是指以自身所包含的内容决定在页面中占据空间的大小,并且可以与其他行内元素共处一行的元素.行内元

js的 style.width 取不到元素的宽度值

以前一直用jquery的.width()方法来获取一个元素的当前的宽度.不管该元素是否设置了宽度,CSS样式是内联.外联or内嵌,都可用此方式获得元素当前的宽度. 今天想用原生JS想获取一个元素宽度时,写document.getElementById("id").style.width或者document.getElementById("id").width都取不到值... 总结了一下.在以下情况下,js原生.style.width或者.width取不到值 1.元素