定位百分比问题——`top`、`left`...、‘translate‘的百分比参照谁？

最新推荐文章于 2023-04-21 16:25:21 发布
最新推荐文章于 2023-04-21 16:25:21 发布
阅读量902 收藏 3
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43906597/article/details/109571398
版权

top、left、right、bottom设置百分比基于父元素！

首先定位之后,left、top、right、bottom 设置百分比的情况是
因为在不同设备下，定位的元素宽高也是不同的，那么这个时候给出固定值显然是不对的。所以用到了百分比

translate’的百分比参照自身
遇到这个问题的时候，是因为我想把这个元素定位居中，可是我要居中的元素没有宽高，是内容撑起来的，那么我无法设置margin值来让他偏移！translate的作用派上了用场！在我设置top、left为50%的时候，设置translate(-50%, -50%)，因为它基于自身宽高度，这样不用计算他的宽高啦

酷酷的Nian
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css百分比问题——`top`、`left`、'translate'的百分比参照谁？
06-05 1514
比如 top、left、transform属性的translate方法，他们的百分比都是相较谁而言的？ top、left是基于父元素的： .parent { position: relative; background-color: rgb(243, 225, 225); height: 100px; width: 240px; } .child { ...
translate 的50%是相对于自己的
jasonjkj的博客
09-19 2542
head> meta charset="UTF-8"> title>Titletitle> style> /*translate 的50%是相对于自己的 子元素的百分比高度是根据父元素的高度来确定的， 所以只要设置了父元素的高度，子元素的高度百分比才会有用。 但是(之前没想那么多) trans
先scale再translate_演练 translate 百分比位移的功效 css 1002
weixin_39815410的博客
12-04 192
视频演练 translate 百分比位移的功效 css 1002​www.ixigua.com测试，位移百分比参数的情况水平50%位移的距离是自身的50%，利用位移实现，盒子的定位先让盒子向左偏移一半试一试只设置x的位移，可以不给第二个参数利用百分比偏移的特性（会根据自己的宽高进行偏移），我们可实现让盒子位于父级，水平，垂直，居中对齐思路：让目标盒子绝对定位为方便演示，只要一个盒子初始状态定位，并...
关于left,top和translate2d以及translate3d性能问题的详讲
qq_45955580的博客
05-30 1337
left和top的性能高还是translate2d的性能高？听说translate3d的性能最高？
transform：translate(-50%，-50%)定位实现百分比居中
xiaoxiezZ的博客
05-07 8198
HTML代码<div id="translateTest"></div>CSS代码#translateTest{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: 30%; bac...
农产品动画制作-变形.pptx
11-01
- `x-axis`、`y-axis`和`z-axis`可以是`left`、`right`、`center`、`top`、`bottom`、长度值或百分比，分别定义元素在X、Y、Z轴上的对齐位置。 ### 应用实例 在农产品动画制作中，这些CSS3变形技术可以用于创建...
Transform解读.docx
11-17
可以使用百分比、长度单位或关键字（如`left top`）来设置。 - `transform-style`: `flat`（默认）表示所有子元素在2D平面呈现，而`preserve-3d`则保留子元素的3D位置。 - `perspective`: 规定视图距离，影响3D...
HTML5+CSS3 transform变形处理.docx
11-28
`transform-origin`接受一个或两个坐标值，可以是百分比或具体的像素值，来定义元素变换前的位置。例如，`transform-origin: left bottom;`将元素的变换基准点设置为其左下角。 在实际应用中，结合`transform`和`...
第24章 CSS3变形效果[上].rar
11-28
transform-origin: top left; } ``` 这将使元素的左上角成为变换的原点。 2. Z轴与3D变形：CSS3还引入了3D变形，通过`rotateX()`, `rotateY()`, `rotateZ()`和`perspective()`等函数，可以在Z轴上进行操作，创建...
jquery实现从不同角度滑入滑出的左右全屏banner.zip
11-07
4. **CSS3转换**：为了实现“不同角度”的滑动效果，jQuery可能结合了CSS3的`transform`属性，如`rotate()`、`translateX()`或`translate3d()`，来创造出视觉上的空间感和动态感。 5. **轮播功能**：Banner通常具有...
position & transform: translate(-50%, -50%) 实现块元素百分比上下居中且自适应屏幕宽度
weixin_44685781的博客
03-03 1020
<div class="login-container"> <div class="login-box"></div> </div> .login-container{ background-color: #2b4b6b; height: 100%; } .login-box{ width: 450px; heigh...
使用合适的CSS优化界面：translate和top/left的比较
michael8512的博客
07-21 3538
Guidelines for translate top/left花了大量的时间去绘制每一帧。所有的css包括好性的box-shdow，都是在CPU上计算的。在translate版本中，却让这个macbook在自己新的图层在GPU中得到提升。此时此元素macboox是在自己单独的一层上，任何2D transform，3D transform或者opacity的变化都可以完全的使用GPU，
【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-21 3867
一、CSS3 2D 转换 - 位移 / 旋转 / 缩放 二、CSS 2D 转换 - Translate 移动 三、Translate 移动代码示例 1、基本示例 2、脱标测试 ( 百分比平移 ) 四、Translate 百分比移动实现绝对定位的居中效果 1、传统实现方式代码示例 2、百分比移动实现绝对定位的居中效果代码示例
30.二维转换属性
potato123232的博客
04-07 723
(二维)转换(transform)可以实现元素位移(translate)，旋转(rotate)，缩放(scale)等效果 常用的是这三个，还有其他不常用的 由于转换的属性名都为transform(包括后面要提到的三维转换)，所以无论写多少transform只有最后的语句生效 目录 1 二维坐标 2 位移 translate 2.1 基本用法 2.2translate不会影响其它元素的位置 2.3垂直(水平)居中 2.3.1垂直居中 2.3.2水平居中 3旋转 rota......
magin，padding百分比。定位top，left百分比总结
qq_38340907的博客
10-11 844
1、margin-top，bottom，left，right 百分比，都是相对的是父元素的宽度。 假设父元素的宽1000px，给子元素设置margin-top: 10%， 就是 1000px * 10% = 100px。 当然padding四个值也是相对于父元素的宽度进行计算的。 2、定位的元素，边偏移百分比 left，right百分比相对于的是带有定位的父级元素的宽度。 top，bottom百分...
CSS学习笔记——百分比相对于谁
Jane的博客
01-07 649
参考： https://blog.csdn.net/qq_44472722/article/details/105512621 https://blog.csdn.net/weixin_42182143/article/details/103161838 https://blog.csdn.net/qq_41633396/article/details/117352112 https://zhuanlan.zhihu.com/p/35530720 1.第一类——定位类 CSS中的定位分为四种，默认值 sta
position定位不设置left top 等值，以及position定位的百分比取值
JiM-W 的博客
01-09 1万+
子元素position 定位 百分比问题 基准 父元素是否定位
CSS中的百分比(%)到底是谁的百分比？
热门推荐
feng
09-22 2万+
在定义CSS样式的时候经常会用的 “%”这个长度单位，但是这个百分比到底是相对于谁的百分比呢？1、有人说是相对于父元素的百分比，但是这么说有时候却会出问题
行内元素padding-left用百分比
aliven1的博客
12-18 991
行内元素padding-left用百分比，不会撑起父元素，会直接换行，用px为单位不会
即确定绝对定位的偏移起点和百分比 长度的参考;
最新发布
05-12
对于确定绝对定位的偏移起点和百分比长度的参考，可以使用CSS中的定位属性来实现。其中，`position`属性可以设置元素的定位方式，常见的有`relative`、`absolute`和`fixed`三种方式。而对于确定偏移起点和百分比长度...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值