位置:电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程:CSS入门到精通 > relative 定位
阅读(22555525)      收藏       赞(5685)      分享
上一篇: fixed 定位 下一篇: absolute 定位

相对定位元素的定位是相对其正常位置

移动相对定位元素,但它原本所占的空间不会改变。

实例

代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Position(定位)-relative 定位</title>
<!--定义内部样式-->
<style>
     p{ border: 1px solid gray;}
     .css1{
             position: relative;
             right:-50px; /*向右移动:负值*/
     }
     .css2{
             position: relative;
             top:20px; /*向右移动:负值*/
     }       
</style>    
</head>
<body>
 
     <p >默认效果图

小白教程网www.2d5.net

</p>      <p >第一行文字</p>      <p >第二行文字</p><hr>           <p >下面我们来移动</p>      <p>第一行文字:向右移动50px</p>      <p>第二行文字:向下移动20px</p>       <p>即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动</p>      </body> </html>
效果图

小白教程网www.2d5.net

image.png


上一篇: fixed 定位 下一篇: absolute 定位
毕业设计网             广告联系QQ:45157718(微信同号)