精华内容
下载资源
问答
  • css相对定位使用示例

    2020-12-13 03:44:13
    顾名思义,此种定位是相对某一个对象进行的偏移,相对定位并不能使对象脱离文档流,尽管它的位置可能产生偏移,但是对象初始位置仍然会被保留。如果要真正掌握此种定位方式,搞清楚需相对于哪个对象进行偏移是关键点...
  • W3School 站点上的所有页面都采用了这种技术,如果您打开我们使用 CSS 文件,您会看到我们对页脚的 div 进行了清理,而页脚上面的三个 div 都向左浮动。
  • 主要介绍了详解微信小程序 相对定位和绝对定位的相关资料,需要的朋友可以参考下
  • 第七讲 GPS绝对定位与相对定位
  • 葛老师编写的GPS相对定位的数学模型,卫星相对定位经典。
  • Selenium4:Selenium 4.0相对定位
  • 网页制作Webjx文章简介:本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的...
  • 代码如下: /** *jQuery rposition *fix:要定位的元素 *rel:相对定位的元素 *options:{},align:左右对齐;vlign:垂直对齐;xleft:水平补给值;xleft:垂直补给值;adjust:是否相对窗口自动调整;rwindow:定位相对于窗口...
  • CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的...
  • GPS相对定位程序

    2017-11-14 19:55:34
    该程序主要利用GPS观测数据,形成双差观测方程,利用已知点坐标求解未知点的坐标,对理解GPS定位原理以及从事GPS算法的人有很大帮助。
  • GPS相对定位基本原理

    2018-07-10 14:56:35
    GPS相对定位原理,在相对定位中,两个或多个观测站同步观测同组卫星的情况下,卫星的轨道误差、卫星钟差、接收机钟差以及大气层延迟误差,对观测量的影响具有一定的相关性。利用这些观测量的不同组合,按照测站、...
  • GPS相对定位的数学模型,魏子卿院士编写的书籍,全书较多干货
  • 相对定位

    千次阅读 2018-12-26 23:10:58
    -relative:开启元素的相对定位 -absolute:开启元素的绝对定位 -fixed:开启元素的固定定位(也是绝对定位的一种) 当元素的position属性设置为relative时,则开启了元素的相对定位: 1.当开启了元素的相对...

    position设置元素定位

    - 通过position属性来设置元素的定位
    	-可选值:
    	-static:默认值,元素没有开启定位
    	-relative:开启元素的相对定位
    	-absolute:开启元素的绝对定位
     	-fixed:开启元素的固定定位(也是绝对定位的一种)
    

    当元素的position属性设置为relative时,则开启了元素的相对定位

    • 1.当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化
    • 2.相对定位是相对于元素在文档流中原来的位置进行定位
    • 3.相对定位的元素不会脱离文档流
    • 4.相对定位会使元素提升一个层级
    • 5.相对定位不会改变元素的性质,块还是块,内联还是内联

    当开启了元素的定位(position属性值是一个非static的值时,可以通过left right top bottom四个属性来设置元素的偏移量

    • left:元素相对于其定位位置的左侧偏移量
    • right:元素相对于其定位位置的右侧偏移量
    • top:元素相对于其定位位置的上边的偏移量
    • bottom:元素相对于其定位位置下边的偏移量
    • 通常偏移量只需要使用两个就可以对一个元素进行定位,一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

    相对定位代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>相对定位</title>
    	<style type="text/css">
    		.box1{
    			height: 200px;
    			background-color: red;
    			position: relative;
    		}
    		.box2{
    			width: 200px;
    			height: 200px;
    			background-color: yellow;
    			position: relative;
    			left: 100px;
    			top: 200px;
    		}
    		.box3{
    			width: 200px;
    			height: 200px;
    			background-color: yellowgreen;
    		}
    
    		.s1{
    			position: relative;
    			width: 200px;
    			height: 200px;
    			background-color: yellow;
    		}
    	</style>
    </head>
    <body>
    	<div class="box1"></div>
    	<div class="box2"></div>
    	<div class="box3"></div>
    
    	<span class="s1">我是一个span</span>
    </body>
    </html>
    
    展开全文
  • 单点定位和相对定位

    2014-07-17 20:36:22
    主要讲解了,GPS定位的方法,包括单点定位和相对定位的方法和原理,有相关的计算方法。
  • 葛老师经典著作,了解GPS相对定位及相关数学模型的经典书籍。
  • jquery元素相对定位插件
  • GPS相对定位原理

    2015-05-26 13:18:53
    GPS相对定位原理,对于初学GPS的人士或对卫星定位感兴趣的会有帮助哟。
  • 一、定位: 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素,通过position属性来设置元素的定位 可选值: static:默认值,元素没有开启... relative:开启元素的相对定位 absolute...

     一、定位:
       

     定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素, 通过position属性来设置元素的定位
     可选值:
                             static:默认值,元素没有开启定位
                             relative:开启元素的相对定位
                             absolute:开启元素的绝对定位
                             fixed:开启元素的固定定位(也是绝对定位的一种)


    1. 当元素的position属性设置为relative时,则开启了元素的相对定位

                       1.当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化
                       2.相对定位是相对于元素在文档流中原来的位置进行定位
                       3.相对定位的元素不会脱离文档流
                      4.相对定位会使元素提升一个层级
                      5.相对定位不会改变元素的性质,块还是块,内联还是内联
     当开启了元素的定位(position属性值是一个非static的值)时,可以通过left right top bottom四个属性来设置元素的偏移量
                          left:元素相对于其定位位置的左侧偏移量
                          right:元素相对于其定位位置的右侧偏移量
                          top:元素相对于其定位位置的上边的偏移量
                          bottom:元素相对于其定位位置下边的偏移量
     通常偏移量只需要使用两个就可以对一个元素进行定位,  一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

    2. 当position属性值设置为absolute时,则开启了元素的绝对定位
                    

       1.开启绝对定位,会使元素脱离文档流
       2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
       3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位)如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
      4.绝对定位会使元素提升一个层级
       5.绝对定位会改变元素的性质, 内联元素变成块元素,块元素的宽度和高度默认都被内容撑开
           

    3.当元素的position属性设置fixed时,则开启了元素的固定定位


           固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样 ,不同的是: 

    固定定位永远都会相对于浏览器窗口进行定位  ,固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动,IE6不支持固定定位 

    4.层级

    如果定位元素的层级是一样,则下边的元素会盖住上边的,通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示,对于没有开启定位的元素不能使用z-index

    展开全文
  • CSS相对定位和绝对定位详解

    万次阅读 多人点赞 2017-08-25 10:33:03
    相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置。相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种: 值 描述 absolute 使元素绝对定位,相对于static定位以外的最近的...

    相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置。

    相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种:

    描述
    absolute使元素绝对定位,相对于static定位以外的最近的一个祖先元素进行定位。
    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    relative使元素相对定位,相对于自己的正常位置进行定位。
    fixed使元素绝对定位,相对于浏览器窗口进行定位。
    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
    inherit规定应该从父元素继承 position 属性的值。

    注:对于html的标准流(文档流)和浏览器怎么渲染各个DOM元素等底层知识,我不怎么清楚,下面的理解方式不一定正确,仅供参考。

    相对定位

    相对定位的参考点,是它自己定位(移动)之前的位置,不是相对于父节点,也不是相对于平级节点。

    分析

    我是分为两步来理解相对定位的,如下:
    1、先不考虑position定位,按标准流将各个元素显示出来。
    2、以元素自身的位置作为参考点,进行左右、上下移动进行定位。

    如下图,最外面的虚线大框代表body,里面有3个div,不考虑定位时显示如下:
    这里写图片描述
    然后在上图的基础上考虑相对定位,如让div2向下20px,向右移动30px,这里div2移动的参考对象就是它自己没移动前的位置,如B点是相对于A点,类似于数学里的平面坐标系。如下图:
    这里写图片描述

    注:div2相对定位移动不影响div1和div3,由于div2并没有脱离标准流(文档流),所以div2 原来的位置还保留着,div3并不会向上移动占用div2原来的位置,而且,相对定位移动之后,有可能会导致元素重叠,下面的验证例子会说明这一点。

    验证

    我们同样用3个div来说明,首先不考虑position相对定位,正常显示,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试相对定位和绝对定位</title>
        <style>
            div{
                width:50px;
                height: 50px;
            }
            .d1{
                background-color: blue;
            }
            .d2{
                background-color: aqua;
            }
            .d3{
                background-color: brown;
            }
        </style>
    </head>
    <body>
    <div class="d1">div1</div>
    <div class="d2">div2</div>
    <div class="d3">div3</div>
    </body>
    </html>

    正常情况下,3个div依次块状显示,运行效果如下:
    这里写图片描述

    现在我们给div2加上相对定位,增加样式position: relative;top: 20px;left: 30px;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试相对定位和绝对定位</title>
        <style>
            div{
                width:50px;
                height: 50px;
            }
            .d1{
                background-color: blue;
            }
            .d2{
                background-color: aqua;
            }
            .d3{
                background-color: brown;
            }
        </style>
    </head>
    <body>
    <div class="d1">div1</div>
    <div class="d2" style="position: relative;top: 20px;left: 30px;">div2</div>
    <div class="d3">div3</div>
    </body>
    </html>

    效果图如下:
    这里写图片描述

    通过比较两幅效果图,总结如下:

    1. 相对定位的元素的参考对象是自己,即自己原来的所在位置(自己原来左上角作为坐标系的原点)。
    2. 相对定位移动后,之前的位置依旧保留,其他元素并不会占用。
    3. 相对定位后,有可能导致元素重叠。

    绝对定位

    描述

    绝对定位的参考对象就不是自己了,而是最近的已设置了position的祖先元素,并且position不是static,而是absolute或者relative。首先看它的父元素是否设置了position为absolute或者relative,如果有就按父元素的左上角作为参考点,如果没有则再找祖父元素、曾祖父元素、高祖父元素,如果都没有就以页面文档的初始位置作为参考点。

    绝对定位的元素是脱离标准流(文档流)的,即直接在标准流中删除,所以元素原来的位置会被占用。

    由于绝对定位元素脱离的标准流,所以元素可以覆盖标准流中元素,也可以通过z-index设置层叠次序,z-index值越大越靠上层。如果把页面比作高楼,正常的元素都是在1层,绝对定位的元素在2层及以上,z-index越大所在层月高,越难被其他元素覆盖。

    测试示例

    1、没有绝对定位的情况,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试相对定位和绝对定位</title>
        <style>
            .d1, .d2, .d3 {
                width: 50px;
                height: 50px;
            }
    
            .p1 {
                width: 450px;
                height: 450px;
                border: 1px solid red;
            }
    
            .p2 {
                width: 380px;
                height: 380px;
                border: 1px solid blue;
            }
    
            .p3 {
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
    
            .d1 {
                background-color: blue;
            }
    
            .d2 {
                background-color: aqua;
            }
    
            .d3 {
                background-color: brown;
            }
        </style>
    </head>
    <body>
    <div class="p1">曾祖父<br><br>
        <div class="p2">祖父<br><br>
            <div class="p3"><br><br>
                <div class="d1">div1</div>
                <div class="d2">div2</div>
                <div class="d3">div3</div>
            </div>
        </div>
    </div>
    
    </body>
    </html>

    运行效果:
    这里写图片描述

    通过上面可以看出,在没有使用绝对定位时,元素都是按标准流(文档流)正常显示的。

    2、让div2绝对定位,它的所有祖先元素都没有设置position为absolute或者relative,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试相对定位和绝对定位</title>
        <style>
            .d1, .d2, .d3 {
                width: 50px;
                height: 50px;
            }
    
            .p1 {
                width: 450px;
                height: 450px;
                border: 1px solid red;
            }
    
            .p2 {
                width: 380px;
                height: 380px;
                border: 1px solid blue;
            }
    
            .p3 {
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
    
            .d1 {
                background-color: blue;
            }
    
            .d2 {
                background-color: aqua;
            }
    
            .d3 {
                background-color: brown;
            }
        </style>
    </head>
    <body>
    <div class="p1"  style="margin-top: 25px;margin-left: 10px">曾祖父<br><br>
        <div class="p2">祖父<br><br>
            <div class="p3"><br><br>
                <div class="d1">div1</div>
                <div class="d2" style="position: absolute;top: 20px;left: 30px">div2</div>
                <div class="d3">div3</div>
            </div>
        </div>
    </div>
    
    </body>
    </html>

    运行效果:
    这里写图片描述

    可以看出,div2所有祖先元素都没设置position时,div2是把页面文档的初始位置作为原点参考对象进行移动的,不是根据父元素、祖父元素,也不是根据曾祖父元素。

    3、祖先元素中有设置position为absolute或者relative时,则把最近的一个作为参考对象。

    示例1:祖父元素设置了position为absolute,父元素设置position为static
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试相对定位和绝对定位</title>
        <style>
            .d1, .d2, .d3 {
                width: 50px;
                height: 50px;
            }
    
            .p1 {
                width: 450px;
                height: 450px;
                border: 1px solid red;
            }
    
            .p2 {
                width: 380px;
                height: 380px;
                border: 1px solid blue;
            }
    
            .p3 {
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
    
            .d1 {
                background-color: blue;
            }
    
            .d2 {
                background-color: aqua;
            }
    
            .d3 {
                background-color: brown;
            }
        </style>
    </head>
    <body>
    <div class="p1">曾祖父<br><br>
        <div class="p2" style="position: absolute;top: 60px;left: 60px">祖父<br><br>
            <div class="p3" style="position: static;top: 20px;left: 30px"><br><br>
                <div class="d1">div1</div>
                <div class="d2" style="position: absolute;top: 20px;left: 30px">div2</div>
                <div class="d3">div3</div>
            </div>
        </div>
    </div>
    
    </body>
    </html>

    运行效果如下:
    这里写图片描述

    通过上图可以看出,div2的父元素设置了position: static,祖父元素设置了position: absolute,div2是以祖父元素为参考的,即相对于祖父元素进行移动定位。

    示例2:div2曾祖父设置了position: absolute,祖父元素设置了position: relative,父元素设置了position: static

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试相对定位和绝对定位</title>
        <style>
            .d1, .d2, .d3 {
                width: 50px;
                height: 50px;
            }
    
            .p1 {
                width: 450px;
                height: 450px;
                border: 1px solid red;
            }
    
            .p2 {
                width: 380px;
                height: 380px;
                border: 1px solid blue;
            }
    
            .p3 {
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
    
            .d1 {
                background-color: blue;
            }
    
            .d2 {
                background-color: aqua;
            }
    
            .d3 {
                background-color: brown;
            }
        </style>
    </head>
    <body>
    <div class="p1" style="position: absolute;top: 40px;left: 100px">曾祖父<br><br>
        <div class="p2" style="position: relative;top: 20px;left: 60px">祖父<br><br>
            <div class="p3" style="position: static;top: 20px;left: 30px"><br><br>
                <div class="d1">div1</div>
                <div class="d2" style="position: absolute;top: 20px;left: 30px">div2</div>
                <div class="d3">div3</div>
            </div>
        </div>
    </div>
    
    </body>
    </html>

    运行效果如下:
    这里写图片描述

    可以看出,div2多个祖先元素设置了position: absolute或者position: relative,是以最近的一个祖先元素为准。

    综合上面的示例,总结如下:

    1. 绝对定位元素脱离正常流(文档流),所以元素原来的位置会被其他元素占用。
    2. 因为绝对定位元素脱离了正常流,和相对元素一样也会有覆盖其他元素的情况。
    3. 绝对定位元素是相对于祖先元素,和相对定位不同,相对定位是相对于元素自己原来的位置。
    4. 绝对定位元素的祖先元素是设置的position: static,该祖先元素并不作为参考物。
    5. 绝对定位元素的祖先元素有多个都设置了position: absoluteposition: relative ,那么是以最近的一个祖先元素作为参考物,即相对于最近的那一个祖先元素进行移动定位。
    展开全文
  • GPS 相对定位 数学模型 魏子卿 葛茂荣
  • 相对定位 relative 绝对定位 absolute 固定定位 fixed 2:定位方位值: left:当前定位元素距离父元素左侧边界的值 top:当前定位元素距离父元素上侧边界的值 bottom:当前定位元素距离父元素下侧边界的值 right: 当前...

    定位 position:

    1:定位类型:

    静态定位 static 标准流下的默认值 一动不动

    相对定位 relative

    绝对定位 absolute

    固定定位 fixed

    2:定位方位值:

    left:当前定位元素距离父元素左侧边界的值

    top:当前定位元素距离父元素上侧边界的值

    bottom:当前定位元素距离父元素下侧边界的值

    right: 当前定位元素距离父元素右侧边界的值

    相对定位

    相对定位

    绝对定位

    在这里插入图片描述

    绝对定位的元素如果父级元素没有定位属性它是以body左上角作为参考定位

    如果父元素有定位属性(相对,绝对,固定)就会以父级元素左上角作为参考定位,所以如果你想要父亲管控孩子,你就必须给父元素身上添加相对定位属性

    父级: 绝对定位元素会以离自己最近的拥有定位属性的父级元素左上角作为参考

    子绝父相

    定位类型是否脱标参考位置值用处坐标位置值
    static否(默认值)
    relative否(保留原来位置)自身左上角微调元素(外边距),子绝父相left,right,bottom,top
    absolute以距离自己最近的拥有定位属性的父级元素左上角定位,直到找到bodyanywhereleft,right,bottom,top
    fixedbody左上角滚动条动它不动left,right,bottom,top

    大小并排就用浮动,间距就用外间距 ,如有小盒子在大盒子里的放置可用绝对定位

    展开全文
  • css 绝对定位和相对定位

    千次阅读 多人点赞 2018-11-10 20:36:07
    绝对定位 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不占据空间。 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已...
  • 相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景 相对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 367,770
精华内容 147,108
关键字:

相对定位