使用translate对元素造成类似position:relative的影响

最新推荐文章于 2021-08-04 04:13:17 发布
最新推荐文章于 2021-08-04 04:13:17 发布
阅读量2.6k 收藏
点赞数 1
分类专栏： 自我学习 文章标签： js 前端 translate
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38841095/article/details/78127407
版权
本文介绍了在前端开发中，使用`translate`对元素进行位移时出现的一个bug。当第一个div触碰第二个div边缘时，背景色未立即改变，而是继续移动半个div高度才响应。问题出在`translateY(-50%)`上，它导致元素实际位置并未改变，而是在原位置占用空间，类似于`position:relative`的效果。添加第三个div并对比`margin-top`与`translateY`的不同效果，进一步验证了这一现象。
摘要由CSDN通过智能技术生成

小白一个，总结一下遇到的问题。

一个小demo，它实现的功能是拖拽第1个div当它触碰到第2个div时，第2个div背景色改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function (){
    
            var oDiv = document.getElementsByTagName("div")[0];
            var fix1=document.getElementsByTagName("div")[1];
            var fix2=document.getElementsByTagName("div")[2];


            console.log(fix1.offsetLeft,fix2.offsetLeft);
            drag(oDiv,fix1);
            function drag(obj,fix){
    
                obj.onmousedown = function (ev){
    
                    if(obj.setCapture){obj.setCapture();}
最低0.47元/天 解锁文章
兜里有米
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS函数: translate、translate3d的使用
胖蔡叨叨叨
06-05 413
和函数可以实现元素在指定轴的平移的功能。函数使用在CSS转换属性transform的属性值。
【css】translate元素仍占据原始位置特性分析
chaomi_didi的博客
12-17 2402
如何发现该特性的？ 使用translateX平移元素后，再用offsetLeft获取元素距离body左侧的距离时，无法获取经translateX移动的部分（背景复现见以下代码），造成该结果的原因是translate属性不会改变元素原始位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
transform对定位元素的影响
weixin_30797027的博客
03-08 311
1、温故知新 absolute：生成绝对定位的元素，相对于除position:static 定位以外的第一个有定位属性的父元素进行定位，若父元素没有定位属性则相对于浏览器窗口的左上角定位，定位的元素不再占据文档的空间。 relative：生成相对定位的元素，相对于其正常位置进行定位,定位的元素仍然占据文档的空间; 2、发现问题 css// div { ...
CSS3：2D转换之移动translate
weixin_46682277的博客
01-06 327
2D移动其实是2D转换里面的一种功能，它可以改变元素在页面中的位置，类似于postion和margin。 语法格式： transform:translate(x,y)，后面需要跟px单位；也可以分开写 transform:translateX(10px); transform:translateY(10px); 例如： <style> div { width: 100px; height: 100px; background-color:
在css中translate表示,css中位移translate()如何使用？translate用法总结
热门推荐
weixin_31845811的博客
08-04 1万+
css3中translate用法是怎么样的？css中位移translate()如何使用？这些可能一些新手学习css所遇到的问题，接下来我们就来讲解一下css中位移translate()如何使用？一：translate()用法在css样式中，很多人都喜欢使用translate()来表示位移，可以使用translate()中的x和y来表示元素在水平方向或者垂直方向上移动。例如：1.translateY...
CSS中translate和position: relative设置的偏移有什么区别？
chiuwingyan的博客
10-09 3136
从页面布局的角度看 transform 和 position:relative 的效果是一样的。 差别在于，transform 可以简单地作用于 position:absolute 的元素上面，而 position:relative; 还得加额外的 html 从动画角度来说 使用 transform 或 position 实现动画效果时是有很大差别。 使用 transform 时，可以让...
css中position:fixed实现div在窗口上下左右居中
09-25
通过position属性，我们可以控制元素的位置关系，常见的定位属性值包括static、relative、absolute和fixed等。其中，position:fixed是一种特殊的定位方式，它可以使元素相对于浏览器窗口进行定位，而与文档流无关，...
通过position定位实现div底端对齐
09-25
在CSS中，position属性是一个非常强大的工具，它允许我们对网页中的元素进行定位。使用position属性，我们可以将元素放置在相对于其正常位置的任何位置，包括通过底端对齐的方式。底端对齐通常是指将一个或多个元素...
HTML对于元素水平垂直居中的探讨
09-28
这种方法要求父元素具有`position: relative`，以便计算子元素的相对位置。 2. **绝对定位法结合JavaScript/jQuery**： 同样使用绝对定位，但通过JavaScript或jQuery动态计算元素的宽度和高度，然后设置`margin-...
浅谈css元素居中
09-24
对于行内元素，可以设置父元素的`line-height`等于元素的高度，或者对图片元素使用`vertical-align: middle;`与其他行内元素对齐。 针对块级元素，有以下几种方法： 1. **使用`display: table-cell; vertical-...
设置块元素居窗口中间的位置实现方法
09-22
首先，将元素的`position`设置为`relative`或`absolute`，然后使用`transform: translateX()`和`translateY()`方法将其向左和向上移动自身宽高的负50%。 ```css .element { position: relative; left: 50%; top:...
浅谈translate属性与相对定位、绝对定位的区别
筱葭的博客
05-08 1万+
水平垂直居中的实现方式有多种，请见：http://blog.csdn.net/zhouziyu2011/article/details/53514416 在支持 CSS3 属性的现代浏览器当中，可以利用CSS3的translate属性实现水平垂直居中。 尤其是当子元素的width和height未知时，无法通过设置margin-left:-width/2和margin-top:-heig
translate和position的比较
weixin_30667649的博客
07-08 696
　　有很多css属性可以影响元素定位，比如float,margin,padding,position,translate()。表面上来看，position:relatative和transform:translate()似乎作用一致，但其实他们之间也有几个差别，本篇文章就将比较这两个属性。 1.浏览器支持情况 　　position是css2的属性，transform是css3的属性，...
CSS3中使用translate() 方法实现元素位置的移动
weixin_39037804的博客
09-20 3982
translate() 方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数： 实例 div { transfor...
CSS3 中的translate transform 你真的搞清楚了？
weixin_34265814的博客
05-16 465
2019独角兽企业重金招聘Python工程师标准>>> ...
css3 transform缩放空白隐藏 （占位策略）
天边逐云
05-15 7536
看了好多百度搜索出来的文章，没有找到想要的解决办法，这里我分享两个解决办法吧，若有不足之处请谅解，谢谢。 第一个，使用margin解决： 原理： 1、外层定容器（溢出隐藏） 2、内层定缩放（具体方法为：定原点，然后margin偏移） 缺点： 1、相对于部分垂直布局偏移距离实际是有误差的（原因没深入了解，有见解的请指点一下，谢谢），...
CSS基础之浮动定位、显示、光标、定位
Andone_hsx的博客
01-09 2246
1、浮动定位   1、定位     简单点说，定位就是改变元素在页面上的默认位置   2、定位的分类     按照定位的效果，可以分成以下几类：     1、普通流定位（默认方式）     2、浮动定位     3、相对定位     4、绝对定位     5、固定定位   3、定位方式-普通流定位     普通流定位，又称为“文档流定位”，页面中所有元素默认定位方式    
从一个居中方法说起 —— 谈 translate 与 相对、绝对定位
zhcscs的博客
07-07 3033
方法介绍 垂直水平居中是日常前端开发当中一个常见的需求，在支持 CSS3 属性的现代浏览器当中，有一个利用 CSS3 属性的垂直水平居中方法： .center { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%);
.abc { transform: scale(1); transition: transform 0.3s ease-out; position: relative; position: absolute; transform: translate(-50%, -50%); }
最新发布
06-07
这是一个CSS样式规则，定义了一个名为"abc"的元素的样式。其中： - `transform: scale(1);`表示该元素的缩放比例为1，即不缩放。 - `transition: transform 0.3s ease-out;`表示该元素的缩放动画时长为0.3秒，缓动函数为ease-out。 - `position: relative;`表示该元素的定位方式为相对定位。 - `position: absolute;`表示该元素的定位方式为绝对定位。 - `transform: translate(-50%, -50%);`表示该元素相对于其父元素水平和垂直方向各向左上偏移50%的宽度和高度，从而实现元素在父元素中居中对齐的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值