css 相对定位 position relative

最新推荐文章于 2024-03-11 16:22:01 发布

cvper

最新推荐文章于 2024-03-11 16:22:01 发布

阅读量6.9k

点赞数 4

分类专栏： HTML 文章标签：相对定位 relative css 坐标系

本文链接：https://blog.csdn.net/cvper/article/details/79210135

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css 相对定位

这里相对的意思是，相对于一个元素没有定位前显示的位置，也就是原来显示的位置，

这个需要注意；

下面分两个部分来看相对定位：

第一部分：如何实现相对定位？

代码（1）：没有加定位的情况下

   <!doctype html> 
 

   < 
  html> 
 

   < 
  head> 
 
 
  < 
  meta 
   charset= 
  "utf-8" 
  > 
 

   < 
  title></ 
  title> 
 
 
  < 
  style 
  > 
 
 
   
  * 
  { 
  margin 
  : 
  0 
  ; 
  padding 
  : 
  0 
  ;} 
 
 
   
  .abc 
  { 
  width 
  : 
  200 
  px 
  ; 
  height 
  : 
  200 
  px 
  ; 
  background-color 
  :red; 
  } 
 
 
   
  < 
  / 
  style 
  > 
 

   </ 
  head> 
 

   < 
  body> 
 

   < 
  div 
  class= 
  "abc"></ 
  div> 
 

   </ 
  body> 
 

   </ 
  html> 
 

代码（2）:添加相对定位

   <!doctype html> 
 
   < 
  html> 
 
   < 
  head> 
 
  < 
  meta 
  charset= 
  "utf-8" 
  > 
 
   < 
  title></ 
  title> 
 
  < 
  style 
  > 
 
  * 
  { 
  margin 
  : 
  0 
  ; 
  padding 
  : 
  0 
  ;} 
 
  .abc 
  { 
  width 
  : 
  200 
  px 
  ; 
  height 
  : 
  200 
  px 
  ; 
  background-color 
  :red; 
 
  position:relative; top:100px; left:100px; 
  } 
 
  < 
  / 
  style 
  > 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  class= 
  "abc"></ 
  div> 
 
   </ 
  body> 
 
   </ 
  html> 
 
   两次显示效果对比： 
 
  相对定位相对的是原先的位置

第二部分：相对定位的坐标系是怎么样的？（以方向轴为正方向）

从上图看，相对的点始终是不会变化的，即原先位置的左上点是坐标原点；

变化的是坐标系的两轴；

当我们以不同的方向为正方向时，坐标系的方向是变化的，如上图；

cvper

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
css 相对定位 position relative

css 相对定位这里相对的意思是，相对于一个元素没有定位前显示的位置，也就是原来显示的位置，这个需要注意；下面分两个部分来看相对定位：第一部分：如何实现相对定位？代码（1）：没有加定位的情况下 html>head>m
复制链接

扫一扫