033_CSS相对定位

1. CSS相对定位

1.1. 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位, 它将出现在它所在的位置上。然后, 可以通过设置垂直或水平位置, 让这个元素"相对于"它的起点进行移动。

1.2. 如果将top设置为20px, 那么框将在原位置顶部下面20像素的地方。如果left设置为30像素, 那么会在元素左边创建30像素的空间, 也就是将元素向右移动。

#box_relative {position: relative;left: 30px;top: 20px;
}

1.3. 如下图所示:

1.4. 注意, 在使用相对定位时, 无论是否进行移动, 元素仍然占据原来的空间。因此, 移动元素会导致它覆盖其它框。

2. 相对定位例子

2.1. 代码

<!DOCTYPE html>
<html><head><title>相对定位</title><meta charset="utf-8" /><style type="text/css">#img1 {background: red;}#img2 {background: blue; position: relative; top: 20px; left: 30px;}#img3 {background: green;}</style></head><body><img src="CrashBtn.png" id="img1" /><img src="MagicBtn.png" id="img2" /><img src="RefreshBtn.png" id="img3" />3.一切皆为框3.1.div、h1或p元素常常被称为块级元素。这意味着这些元素显示为一块内容, 即"块框"。3.2.img等元素称为"行内块元素", 意味着这些元素在行内显示为一块内容, 即"行内块框"。3.3.span和strong等元素称为"行内元素", 这是因为它们的内容显示在行中, 即"行内框"。</body>
</html>

2.2. 效果图

033_CSS相对定位相关推荐

CSS之定位（定位/相对定位）
定位/相对定位: <!DOCTYPE html> <html><head><meta charset="utf-8" /><t ...
IE6下绝对定位的DIV被相对定位的DIV挡住的问题
http://blog.sina.com.cn/s/blog_4be6505c0101cicr.html 今天在做项目的时候,遇到了一个问题,在一个div中,有个绝对的div,不论这个绝对定位的div ...
【约束布局】ConstraintLayout 13 种相对定位属性组合 ( 属性组合 | 用法说明 )
文章目录相对定位简介相对定位属性组合前提条件相对定位 Left Right 四种组合属性相对定位 Start End 四种组合属性相对定位 Top Bottom 四种组合属性相对定位控件约 ...
点击定位到指定位置_以三菱PLC来举例说明相对定位与绝对定位指令
在自动化生产.加工和控制过程中,经常要对加工工件的尺寸或机械设备移动的距离进行准确定位控制.这种定位控制仅仅要求控制对象按指令进入指定的位置,而,定位又为绝对定位,相对定位两种,那么为什么又分为绝对定 ...
CSS之固定定位、相对定位、绝对定位
一.相对定位相对元素自身所在的原来的位置进行定位. 可以设置 left,right,top,bottom四个属性效果:在进行相对定位以后,元素原来所在的位置被保留了,被占用了–>保留站位其他 ...
CSS3的绝对定位与相对定位
一.position 的四个值:static.relative.absolute.fixed. 绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative 默认值:stat ...
div+css相对定位和绝对定位
今天突然发现自己在布局的时候思路很乱,于是毅然决然的想要重新的理一下自己的布局思路,今天就先从定位开始吧~ 绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,如果对象的父级没有设置 ...
层模型--绝对定位、相对定位、固定定位
绝对定位: 如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性 ...
WEB学习 -相对定位、绝对定位、固定定位、z-index
相对定位相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. 2.不脱标,老家留坑,形影分离也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘.3.相对定位用途 ...

033_CSS相对定位

033_CSS相对定位相关推荐

最新文章

热门文章