再谈css相对定位和相对定位用法
CSS relative相对定位
设置为相对定位的元素框会偏移某个间隔。元素依然坚持其未定位前的外形，它底本所占的空间仍保存。
CSS 相对定位
相对定位是一个异常轻易控制的观点。假如对一个元素举行相对定位，它将出如今它地点的位置上。然后，能够经由过程设置垂直或程度位置，让这个元素“相对于”它的出发点举行挪动。
假如将 top 设置为 20px，那末框将在原位置顶部下面 20 像素的处所。假如 left 设置为 30 像素，那末会在元素左边建立 30 像素的空间，也就是将元素向右挪动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
注重，在运用相对定位时，不管是不是举行挪动，元素依然占有本来的空间。因而，挪动元素会致使它掩盖别的框。
CSS 相对定位实例
<html>
<head>
<style type="text/CSS">
h2.pos_left { position:relative; left:-20px }
h2.pos_right { position:relative; left:20px }
</style> </head>
<body> <h2>这是位于平常位置的题目</h2>
<h2 class="pos_left">这个题目相对于其平常位置向左挪动</h2>
<h2 class="pos_right">这个题目相对于其平常位置向右挪动</h2>
<p>相对定位会根据元素的原始位置对该元素举行挪动。</p>
<p>款式 "left:-20px" 从元素的原始左边位置减去 20 像素。
</p>
<p>款式 "left:20px" 向元素的原始左边位置增添 20 像素。
</p>
</body>
</html>
再谈css相对定位和相对定位用法
2.定位的抽象诠释
我先来架设一个假造的场景：有一个矩形的房间，内里另有一个水桶装了些水，水里还浸泡着一个西瓜，这个房间半空中另有不少的钩子用于挂东西用。如今我把网页元素与上面物件对应上，那末房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流，西瓜就是将要被定位的对象。
（1）孝敬的相对定位（absolute）
对比前面诠释，假如西瓜被给予相对定位，那末就即是把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜本来占用的空间水会自动弥补它（相对定位对象会让出自身本来占用位置，所以说它是孝敬的）。此时假如之前没有对水桶举行定位设定，那末被拿起的西瓜位置不会再受水桶位置影响，水桶怎样挪动，西瓜照样挂在本来位置，至于西瓜要怎放，则以房间左上角（body左上角）为准，用left，right，top，bottom值来定位。
然则假如水桶也给出了定位设置（通常是相对定位，下面有讲到这一实用技巧），此时西瓜的摆放就没有那末自在了，只管此时西瓜被拿起来了不会影响水桶中的水（文本流），但它照样要听桶的话，桶会通知西瓜“你能够运动，但应该在我的范围内走动，比方说我要你在我左上方1米处，你就要跟死这一点，我走你也要随着走”，假如桶中有很多个西瓜，能够悉数拿出来吊到半空中，它们将被部署在差别高度的空间（层），所以在房顶垂直往下看，有能够看到差别西瓜层叠在一同的状况（这个所谓的高度在网页中是不存在的，就像FLASH动画中的差别层上部署了元素，但它们在看时不会有深度觉得）。可见相对定位的对象参考目的是它的父级，专业称之为包括块。
（2）自私的相对定位（relative）
相对定位一个最大特点是：自身经由过程定位跑开了还占用着本来的位置，不会让给他四周的诸如文本流之类的对象。相对定位也比较自力，做什么事它自身说了算，要定位的时刻，它是以自身自身地点位置偏移的（相对对象自身偏移）。再拿前边作比方来解，那末此时西瓜似乎是有魔法的，假如西瓜经由过程相对定位在水桶中偏移了你会看到一个实际生活中不存在的征象：水中有一个处所水凹下去了，四周的水不能弥补它，西瓜看起来在旁边，假如搅动一下桶中的水，谁人凹的位置会发明转变 （文本流对相对定位对象还存在影响），然则凹处到西瓜涌现的间隔一直坚持一致。可见文本流与它之间还会相互影响，由于对象并没有真正离开文本流，就像有两个人在统一层楼程度挪动的过程当中会有见面的时机。
（3）总结两种定位的特性
相对定位就像是把差别对象部署到了一栋高楼的差别楼层（平常指不是第一层，我们这里理解为文本流就放在首层），它们互不影响，然则它们怎样挪动与你楼的地基和面积（父级）有关。相对定位指对象照样在首层楼与文本流一同寄存，它们之间一定存在影响。
（4）对特殊状况的补充
在用相对定位和相对定位的时刻，有一种状况是它们的定位值用到了负值则对象可沿相反方向挪动，适才说到的把对象部署在一栋楼的差别层，假如某个对象一开始就是背靠着最外边墙的，此时再用一个负值定位它，它就会奇异般地跑出墙外去了，固然实际中可没有这类危险而又奇异的事发作，本人只为了延用上面的比方作抽象诠释。
以上就是对css相对定位和相对定位用法详解的悉数引见，假如您想相识更多有关CSS3教程，请关注ki4网。
以上就是css相对定位和相对定位用法详解的细致内容，更多请关注ki4网别的相干文章！
