咨询电话:
15628812133
05
2023/11

css整体移动div

发布时间:2023-11-05 12:10:25
发布者:·
浏览量:
0

css整体移动div

设计出具了这样的一个需求,一眼丁真-鉴定为移动div,首先写成如下这种情况。

css整体移动div

接下来给大家介绍一下移动div的常用方法

1.transformtranslateY()

作为css中唯一一个控制元素位置的元素,当然首先介绍一下他。translate()方法,根据左(X)和顶部(Y)位置给定的参数,从当前元素位置移动。在括号内部输入移动的像素值或者百分比就能把元素向选定方向移动,这样的移动方法是保留元素在原位置的空间的,也就是说,底部会发生这种情况。

 css整体移动div

因为元素移动前的空间并没有被占据,所以如果后续元素没有脱离文档流或者没有移动相同的距离,那么会显露出背景的大片空白。

2.positionrelative

相对定位,我们直接使用相对定位,设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

这个情况和transformtranslate()一样,原本的空间将被保留,底部的元素也将显露出大量空白。

3.margin外边距

外边距也可以用来移动元素,准确来说并不是移动,而是依靠外边距把原本的元素给撑开,于是我们可以用逆向思维,当我们设置外边距为负时,元素的外边距因为是负值就会发生坍缩,内部的元素就会超坍缩的方向移动。

 css整体移动div

当我们使用margin移动时,会发生这样的情况,我们可以使用相对定位和z-index使其优先级大于头部背景,就可以正常显示了。

 css整体移动div

相对于其他两种情况,这个margin法的优势在于元素不占据原来的位置,其他元素能够跟在该元素后正常显示。


关键词:
返回列表