精华内容
下载资源
问答
  • 相对定位
    千次阅读
    2021-06-12 00:54:52

    5268f80b9b1e01f982625ef6fac83ca1.png

    定位的四种模式:static,relative,absolute,fixed

    定位的四个位置:left,right,top,bottom

    定位属性:position,有四种状态值

    1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效

    2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效

    3.absolute:绝对定位,元素相对于它的定位父级定位,脱离文档流,四个位置有效

    4.fixed:固定定位,与绝对定位类类似,也脱离了文档流,元素在页面上的位置固定,不随页面滚动,四个位置有效

    1.相对定位

    .box1 {

    width:200px;

    height: 200px;

    background-color: lightskyblue;

    position: relative;

    top:0;

    left:200px;

    }

    .box2 {

    width:200px;

    height: 200px;

    background-color: lightgreen;

    /*position: static;*/

    }

    .box3 {

    width:200px;

    height: 200px;

    background-color: lightcoral; /*珊瑚色*/

    /*position: static;*/

    /*相对定位:十字架,这个色块距顶为-200px,距左为400px*/

    position:relative;

    top: -200px;

    left: 400px;

    }

    .box4 {

    width:200px;

    height: 200px;

    background-color: brown;

    /*position: static;*/

    /*相对定位:十字架,这个色块距顶为-200px,距左为400px*/

    position:relative;

    top: -200px;

    left: 200px;

    }

    更多相关内容
  • CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px,...
  • 主要介绍了详解微信小程序 相对定位和绝对定位的相关资料,需要的朋友可以参考下
  • css相对定位使用示例

    2020-12-13 03:44:13
    顾名思义,此种定位是相对某一个对象进行的偏移,相对定位并不能使对象脱离文档流,尽管它的位置可能产生偏移,但是对象初始位置仍然会被保留。如果要真正掌握此种定位方式,搞清楚需相对于哪个对象进行偏移是关键点...
  • 葛老师编写的GPS相对定位的数学模型,卫星相对定位经典。
  • 第七讲 GPS绝对定位与相对定位
  • CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的...
  • CSS相对定位和绝对定位

    千次阅读 2022-04-06 16:25:21
    CSS相对定位和绝对定位相对定位绝对定位没有父盒子有父盒子时 文章参考进行了一定修改添加 相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置。 相对定位和绝对定位是通过position属性来控制的,position...

    文章参考进行了一定修改添加

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

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

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

    相对定位

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

    相对定位的元素,通过 left、right 属性来定义水平偏移量,top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离,right 表示相对于原本位置的右外边界左移的距离,top 表示相对于原本位置的上外边界下移的距离,bottom 表示相对于原本位置的下外边界上移的距离。并且,偏移量可以是正值,也可以是负值,负值表示向相反的方向移动。

    left、right、top、bottom 这 4 个属性的值,可以是长度值(可以是绝对单位或相对单位),也可以是百分比。使用百分比时,水平偏移量根据其父元素 width 属性的值计算得到,垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是,在设置偏移时,如果父元素没有显式定义 height 属性,就等同于 height 属性的值为 0。

    在没有使用定位时

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                height: 50px;
                width: 50px;
            }
    
            .d1 {
                background-color: red;
            }
    
            .d2 {
                background-color: green;
            }
    
            .d3 {
                background-color: blue;
            }
        </style>
    </head>
    
    <body>
        <div class="d1">div1</div>
        <div class="d2">div2</div>
        <div class="d3">div3</div>
    </body>
    
    </html>
    

    在这里插入图片描述
    接下来我们对div2使用相对定位,增加样式position: relative;top: 20px;left: 30px;

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                height: 50px;
                width: 50px;
            }
    
            .d1 {
                background-color: red;
            }
    
            .d2 {
                background-color: green;
                position: relative;
                top: 20px;
                left: 30px;
            }
    
            .d3 {
                background-color: blue;
            }
        </style>
    </head>
    
    <body>
        <div class="d1">div1</div>
        <div class="d2">div2</div>
        <div class="d3">div3</div>
    </body>
    
    </html>
    

    在这里插入图片描述
    相对于原来的位置向右移动30px向下移动20px(距离原位置顶部20px,左部30px)

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

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

    绝对定位

    position: absolute; 的元素相对于最近的定位祖先元素进行定位(而不是相对于视口定位,如 fixed)。
    然而,如果绝对定位的元素没有祖先,它将使用文档主体(body),并随页面滚动一起移动。
    父级有定位,则看父级,父级没有定位,则继续向上找父级,实在找不到的话,就浏览器对齐

    没有父盒子

    没有父盒子时父盒子就是浏览器

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
                /*消除浏览器内外边距*/
            * {
                margin: 0;
                padding: 0;
            }
    
            .alone {
                width: 300px;
                height: 300px;
                background-color: blueviolet;
                /* 绝对定位:距离顶部100px,距离左边100px */
                position: absolute;
                top: 100px;
                left: 100px;
            }
        </style>
    </head>
    
    <body>
        <div class="alone"></div>
    </body>
    
    </html>
    

    距离顶部100px,距离左边100px
    在这里插入图片描述

    有父盒子时

    当父盒子没有设置定位时,继续向上级找父级,都没有的话还是和浏览器对齐

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .father{
                width:500px;
                height: 500px;
                margin-top: 150px;
                margin-left: 150px;
                background-color: beige;
            }
    
            .alone {
                width: 300px;
                height: 300px;
                background-color: blueviolet;
                /* 绝对定位:距离顶部0px,距离右边0px */
                position: absolute;
                top: 100px;
                left: 100px;
            }
        </style>
    </head>
    
    <body>
        <div class="father">
            <div class="alone"></div>
        </div>
    </body>
    
    </html>
    

    这个例子中父容器没有定位(默认static定位),继续向父级查找,没有父级,因此还是和浏览器对齐
    在这里插入图片描述
    当父盒子有定位时,相对于父盒子定位

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .father{
                position: relative;
                width:500px;
                height: 500px;
                margin-top: 150px;
                margin-left: 150px;
                background-color: beige;
            }
    
            .alone {
                width: 300px;
                height: 300px;
                background-color: blueviolet;
                /* 绝对定位:距离顶部0px,距离右边0px */
                position: absolute;
                top: 100px;
                left: 100px;
            }
        </style>
    </head>
    
    <body>
        <div class="father">
            <div class="alone"></div>
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

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

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                height: 50px;
                width: 50px;
            }
    
            section{
                position: relative;
                background-color: aqua;
            }
    
            .d1 {
                background-color: red;
            }
    
            .d2 {
                background-color: green;
                position: absolute;
                top: 20px;
                left: 30px;
            }
    
            .d3 {
                background-color: blue;
            }
        </style>
    </head>
    
    <body>
        <section>
        <div class="d1">div1</div>
        <div class="d2">div2</div>
        <div class="d3">div3</div>
        </section>
    </body>
    
    </html>
    

    在这里插入图片描述
    由图可以看出,在父容器使用非static定位,div2中使用绝对定位时,div2原本的位置被删除,div2相对于父容器section进行定位。

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

    1. 绝对定位元素脱离正常流(文档流),所以元素原来的位置会被其他元素占用。
    2. 因为绝对定位元素脱离了正常流,和相对元素一样也会有覆盖其他元素的情况。
    3. 绝对定位元素是相对于祖先元素,和相对定位不同,相对定位是相对于元素自己原来的位置。
    4. 绝对定位元素的祖先元素是设置的position: static,该祖先元素并不作为参考物。
    5. 绝对定位元素的祖先元素有多个都设置了position: absolute或position: relative ,那么是以最近的一个祖先元素作为参考物,即相对于最近的那一个祖先元素进行移动定位。
    展开全文
  • 卫星GPS静态相对定位应用以及精度的研究
  • GPS相对定位基本原理

    2018-07-10 14:56:35
    GPS相对定位原理,在相对定位中,两个或多个观测站同步观测同组卫星的情况下,卫星的轨道误差、卫星钟差、接收机钟差以及大气层延迟误差,对观测量的影响具有一定的相关性。利用这些观测量的不同组合,按照测站、...
  • 相对定位 相对定位 01 元素的定位 定位 属性 相对 定位 绝对 定位 固定 定位 静态 定位 描述 在CSS中,通过定位属性可以实现网页中元素的精确定位,元素的定位属性主要包括定位模式和边偏移两部分。 相对定位 描述 ...
  • GPS算法中相对定位的最好书籍,作者 葛茂荣 魏子卿编写完成,价值很大
  • 三菱FX3U定位控制与伺服应用技术031.相对定位指令03
  • 二、各个属性值的作用1、相对定位2、绝对定位3、静态定位4、固定定位三、相对和绝对定位1、相对定位2、绝对定位3、相对定位和绝对定位(1)相对定位(2)绝对定位四、相对、绝对定位与浮动1、相对定位2、绝对定位3、...

    一、什么是定位?

    css中的position属性,position有四个值:relative(相对定位)、absolute(绝对定位)、static(静态定位)和fixed(固定定位),通过top、left、bottom、right来调整元素位置

    二、各个属性值的作用

    属性值作用备注
    relative相对定位参考元素本身
    absolute绝对定位参考最近的祖先元素
    static静态定位基本定位规定
    fixed固定定位参考浏览器窗口

    1、相对定位

    相对定位的偏移元素参考的是元素本身,不会使元素脱离文档流,元素的初始位置占据的空间会被保留
    html代码:
    在这里插入图片描述
    css代码:
    在这里插入图片描述
    网页效果:

    在这里插入图片描述

    可以看出相对定位是相对于元素本身来说,其中距离顶部30px,距离左边20px,并且没有脱离文档流

    2、绝对定位

    绝对定位是相对于已定位的最近的祖先元素,如果的最近的祖先元素没有设置定位,那么它的位置就相对于最初的包含块(body)
    css代码:
    在这里插入图片描述
    网页效果:在这里插入图片描述

    可以看到绝对定位脱离文档流,由于父级元素未进行定位,所以是以最初的包含块(body)进行定位,现在将该元素的父级元素进行定位
    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述
    这里父级元素定位之后,该元素是以父级元素来进行定位

    3、静态定位

    没有特别的设定,不脱离文档流,遵循基本的定位规定,不能通过z-index进行层次分级
    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述
    可以看出红色块位置没变,可以知道static(静态,默认属性)通常情况下不会使用,position值一般为默认

    4、固定定位

    固定定位相对于浏览器窗口,脱离文档流,使用fixed的元素不会随窗口的滚动而滚动
    html代码:

    css代码:

    网页效果(未设定固定定位):
    在这里插入图片描述
    网页效果(设定固定定位)
    在这里插入图片描述
    可以看出进行固定定位后,即使窗口进行滚动,红色块的位置不变

    三、相对和绝对定位

    将三个色块来区别相对定位和绝对定位
    未进行定位时,默认网页效果:
    在这里插入图片描述

    1、相对定位

    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述
    可以看出相对定位和默认定位效果是一样的

    2、绝对定位

    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述
    这里红、黄、蓝色块重叠显示了,即脱离文档流

    3、相对定位和绝对定位

    为了使效果更加明显,这里将红、黄、蓝三色块进行一定程度的偏移

    (1)相对定位

    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述

    (2)绝对定位

    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述

    四、相对、绝对定位与浮动

    绝对定位和浮动都脱离文档流

    1、相对定位

    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述

    2、绝对定位

    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述

    3、浮动

    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述
    可以看到浮动(float)为文字包围红色色块,但文本与红色色块的距离过近,无法设定边距

    4、相对定位与浮动

    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述
    相对定位和浮动结合可以设定文本与红色色块的边距

    5、绝对定位和浮动

    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述

    五、z-index的使用

    若要将下面的色块中红色色块显示在黄色色块上面,可以使用z-index
    在这里插入图片描述
    css代码:
    在这里插入图片描述
    网页效果:
    在这里插入图片描述
    可以看到红色色块显示在红色色块上面,这里z-index的数值为40,20,30,实际上网页有时不止这些,可能上百,这里只是为了方便显示

    六、小结

    1. 相对定位作为绝对定位的父一级元素出现,给绝对定位作为参照物
    2. 相对定位:以自己作为参照物
      绝对定位:以父一级元素作为参照物
    3. 相对定位和浮动
      将两者的特点结合,进行浮动和偏移
    4. 绝对定位和浮动
      绝对定位:忽略绝对定位所占用的位置
      浮动:绕过浮动所占用的位置
    展开全文
  • 相对定位与绝对定位

    千次阅读 2022-02-06 12:01:11
    实现某个元素可以自由的在一个盒子...一、相对定位 relative : 语法: 选择器{ position:relative;} 例如: CSS代码如下: .box1 { width: 200px ; height: 200px ; background-color: rosybrown ; } .box2 {

    实现某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子,我们可以利用定位来实现。

    一、相对定位 relative :
    语法:

    选择器{ position:relative;}
    

    例如:
    CSS代码如下:

            .box1 {
                width: 200px ;
                height: 200px ;
                background-color: rosybrown ;
            }
    
            .box2 {
                width: 200px ;
                height: 200px ;
                background-color: royalblue ;
            }
    

    效果图:
    在这里插入图片描述
    加入相对定位后:

     .box1 {
                position:  relative ;
                top: 100px;
                left: 100px;
                width: 200px ;
                height: 200px ;
                background-color: rosybrown ;
            }
    
            .box2 {
                width: 200px ;
                height: 200px ;
                background-color: royalblue ;
            }
    

    效果图:
    在这里插入图片描述
    总结:
    1、相对于自己原来的位置移动;
    2、不脱标,继续保留原来位置。

    二、绝对定位 absolute :
    语法:

    选择器{ position:absolute;}
    

    例如:
    CSS代码如下:

           .father {
                position:  relative ;
                width: 300px ;
                height: 300px ;
                background-color: rosybrown ;
            }
            .son {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 200px;
                height: 200px;
                background-color: aquamarine;
            }
    

    效果如下:
    在这里插入图片描述
    以上例子就是我们常说的“子绝父相”:
    ①子级绝对定位,不会占有位置,可以放到父级盒子的任何一个地方,不会影响其他盒子;
    ②父级盒子需要加定位限制子盒子在父级盒子内显示;
    ③父级盒子布局时,需要占有位置,因此父级只能是相对定位。

    绝对定位特点:
    1、若没有父级元素或父级元素没有定位,则以浏览器为准定位;
    2、如果父级元素有定位,则以最近一级的有定位父级元素为参考点移动位置;
    3、绝对定位不占有原先位置。

    定位总结:
    在这里插入图片描述

    展开全文
  • 什么是相对定位?( Relative positioning ) 简单代码实现: - 1.3.什么是绝对定位?(Absolute positioning) - 绝对定位参考点 效果图: -绝对定位水平居中 - 1.4.固定定位(Fixed positioning) - 1.5.粘滞...
  • CSS position 相对定位和绝对定位

    千次阅读 2021-06-10 12:16:41
    绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative默认值:static二、relative定位与absolute定位的区别实例:HTML代码:css代码:初始效果:1、relative:相对于原来位置移动,元素设置此属性之后仍然...
  • 相对定位 相对元素自身所在的原来的位置进行定位。 可以设置 left,right,top,bottom四个属性 效果:在进行相对定位以后,元素原来所在的位置被保留了,被占用了–》保留站位其他元素的位置不会发生移动 一般情况下,...
  • 相对定位

    2017-07-22 20:46:48
    (3)相对定位中有以下几种属性,相对定位结合以下几个属性使用: top: ; right: ; bottom: ; left: ; (4)什么是相对定位相对定位就是相对于自己以前在标准流中的位置来移动的
  • 一、定位 1、定位的定义 某个元素可以自由地在盒子上面移动,并且可以压着其他元素 当滚动窗口时,某个元素可以固定在...相对定位 absolute 绝对定位 fixed 固定定位 边偏移(方位名词) 据定了元素的最终位置
  • CSS中绝对定位和相对定位的区别及作用

    千次阅读 多人点赞 2021-06-30 17:09:36
    CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一、绝对定位二、相对定位三、绝对定位与相对定位的区别四、绝对定位与相对定位的使用结语 针对定位的区别及使用我整理一些方法 css的学习...
  • 一、相对定位相对定位是指,该元素相对自己原来位置,偏移一定距离,元素可以通过顶部top,底部bottom,左侧left和右侧right属性来设置定位。它相对的是它自己。举例:大div里面包含5个小P,给P不同的类名,分别设置...
  • 置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,...
  • html相对定位和绝对定位

    千次阅读 2021-06-13 04:07:22
    相对定位:该元素相对于本身原有位置,偏移必定距离。相对的是本身。css绝对定位:该元素相对于其父元素,偏移必定距离。相对的是父元素,重点是这个父元素也须要是设置了position属性。从最近的父元素开始找,直到...
  • 1.1 相对定位(relative) ​ 相对定位是元素在移动位置的时候,是相对于它原来的位置来说的; 特点: ​ 它是相对于自己原来的位置来移动的(移动位置的时候是参照点是自己原来的位置); ​ 原来在标准流的位置...
  • 三菱FX3U定位控制与伺服应用技术030.相对定位指令02
  • GPS相对定位原理

    2015-05-26 13:18:53
    GPS相对定位原理,对于初学GPS的人士或对卫星定位感兴趣的会有帮助哟。
  • 关于相对定位和绝对定位的区别

    千次阅读 2022-04-17 15:30:22
    在我们进行编程的过程中时常会用到position:relative和position:absolute,分别是...2、父元素设置了相对定位或绝对定位,元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位 (或者说离自己最近的不是st

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 436,722
精华内容 174,688
关键字:

相对定位