前言
前端 使用CSS属性,使Div上下左右移动指定像素
前端的Css属性真的太多了,很不容易记下,所以写一篇博客记录,加深记忆。
需求
上面是美工出的图 大概就是2个横着排列的div和分页器居中对齐
下面是我做的效果 有点出入
我用android的那一套是不行的
margin-left: 20px; //这个可以生效
margin-bottom: 20px;//这个并没有
那么如何向上移动完成效果呢?
css相对定位
相对定位是一个概念,如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动
----- 如果将top设置为20px,那么框将在原位置顶部下面的20像素的地方。如果left设置为30像素,那么会在元素左边创建30像素的空间,也就是将元素向右移动
.div {
position: relative;
left: 30px;
top: 20px;
}
如下图示:
- 这里需要注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框。相对定位会按照元素的原始位置对该元素进行移动!