 |
位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：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 >默认效果图</p>
<p >第一行文字</p>
<p >第二行文字</p><hr>
<p >下面我们来移动</p>
<p>第一行文字：向右移动50px</p>
<p>第二行文字：向下移动20px</p>
<p>即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动</p>
</body>
</html>效果图
|
|
| 上一篇： fixed 定位 | 下一篇： absolute 定位 |
