相对定位

最新推荐文章于 2018-07-17 17:08:38 发布
最新推荐文章于 2018-07-17 17:08:38 发布
阅读量109 收藏
点赞数
分类专栏： css知识点 文章标签： css的定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shisjieshoufu/article/details/79310866
版权
<!DOCTYPE html >
< html >
< head >
< meta charset= "utf-8" />
< meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
< title >相对定位 </ title >
< meta name= "viewport" content= "width=device-width, initial-scale=1" >
< link rel= "stylesheet" type= "text/css" media= "screen" href= "main.css" />
< script src= "main.js" > < / script >
< style type= "text/css" >
.one{
                 width: 100px;
                 height: 100px;
                 background-color: red;
                 /* position: relative; */
             }

             .two{
                 width: 100px;
                 height: 100px;
                 background-color: green;

                 position: relative; /* 相对定位 */
        
/* ☞元素设置了相对定位后占原来的位置
     ☞设置相对定位以自己的位置为参照设置位置 */

                 left: 10px;
                 top: 20px;}

/* ☞相对定位不能进行元素的模式转换
☞子绝父相（子元素设置绝对定位，父元素设置相对定位） */
span{
                 width: 100px;
                 height: 100px;
                 background-color: red;
                 position: relative;
             }


< / style >
</ head >
< body >
< span >
相对定位
</ span >
<!-- <div class="one">
        
     </div>

     <div class="two">
        
     </div> -->


</ body >
</ html >
御裔宸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 相对定位 绝对定位 浮动 分析
09-25
本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。 **相对定位（Relative Positioning）** 相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下...
css相对定位使用示例
09-25
css相对定位使用示例 css相对定位是css中的一种基本定位方式，它的特点是相对某个对象进行偏移，而不是相对文档流。相对定位的对象仍然会保留它在文档流中的位置，而不是脱离文档流。 基本概念： 相对定位...
RTKLIB相对定位源码函数解析
最新发布
12-03
RTKLIB是一个开源的全球导航卫星系统(GNSS)软件库，特别用于实时和后处理的高精度相对定位。本文将深入解析RTKLIB的源码，重点在于理解其相对定位功能的实现。我们从主函数`main(rnx2rtkp.c)`开始分析。 **1.1 调用...
GPS相对定位程序
11-14
GPS相对定位程序是一种基于全球定位系统（GPS）的高级定位技术，它通过比较两台或更多GPS接收机之间的观测数据来提高定位精度。相对于绝对定位（依赖于单一接收机与多个卫星之间的通信），相对定位考虑了接收机间的...
背景图片的精灵图的使用
yibashou的博客
02-11 3414
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;背景图片的精灵图的使用&lt;
使用css技术美化网页
yibashou的博客
07-17 3007
1、引入css的代码有内行式与外联式的标签。 &lt;标记名 style=“属性1：属性1值；属性2：属性2值；”&gt;内容&lt;/标记名&gt;         标记名就是标签的名字 2、引入css的内嵌式的方式 &lt;head&gt; &lt;title&gt;标题&lt;/title&gt; &lt;style type="text/css"&gt; 选择器{属性1：属
小米的首页官网
yibashou的博客
02-11 1080
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;小米的官网首页&lt;/tit
图片与文字的垂直对齐
yibashou的博客
02-11 1010
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;图片与文字垂直对齐&lt;/t
owerflow的滚动条
yibashou的博客
02-01 691
DOCTYPE html> html lang="en"> head> meta charset="utf-8"> style type="text/css">             div{                  width: 300px;                  height: 300px;                 
网页布局的简单案例
yibashou的博客
01-29 672
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>网页布局title> meta name="viewport" content="width=device-width, initial-scale=
css的伪类的超链接的颜色变化处理
yibashou的博客
01-24 558
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>超链接默认状态下的样式title> meta name="viewport" content="width=device-width, initial
css超链接的案例
yibashou的博客
01-24 438
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>css的超链接导航条的案例title> meta name="viewport" content="width=device-width, initi
Html标签的分类
yibashou的博客
01-23 345
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>Page Titletitle> meta name="viewport" content="width=device-width, initial-
网页的第二种复杂的布局
yibashou的博客
01-29 332
DOCTYPE html> html lang="en"> head> meta charset="utf-8"> style type="text/css">             *{                 margin: 0;                 padding:0;             }             
浮动的简单例子
yibashou的博客
01-29 330
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>浮动的变化title> meta name="viewport" content="width=device-width, initial-scale
行高与盒子模型
yibashou的博客
02-11 318
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;行高与盒子模型&lt;/tit
固定定位
yibashou的博客
02-11 220
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;固定定位&lt;/title&
css的背景图片
yibashou的博客
01-25 200
DOCTYPE html> html lang="en"> head> meta charset="utf-8"> style type="text/css">              div{ background-image:url("1.png"); width: 500px; height:500px; /* 不平铺 */ background-re
规避脱标流
yibashou的博客
02-11 191
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;规避脱标流&lt;/title
GPS静态相对定位原理与优势
"本文介绍了GPS相对定位原理，特别是静态相对定位的概念和方法。GPS静态相对定位是一种高精度的定位技术，通过两台接收机在固定位置同步观测多颗卫星来确定它们在协议地球坐标系中的相对位置。这种定位方式通常利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值