精华内容
下载资源
问答
  • 相对定位 相对位置,是指相对于盒子在原本定位体系下的位置 将盒子的position属性设置为relative,以启用相对位置 盒子启用相对位置,起始位置为元素本身位置的左上角,移动后会保留盒子的本身的位置,下面的常规流...

    相对定位

    相对位置,是指相对于盒子在原本定位体系下的位置

    将盒子的position属性设置为relative,以启用相对位置

    盒子启用相对位置,起始位置为元素本身位置的左上角,移动后会保留盒子的本身的位置,下面的常规流盒子不会移动。
    在这里插入图片描述

    视口

    浏览器的可视 窗口

    绝对定位

    概述

    • 当浮动元素被设置为绝对定位

      属于绝对定位,float属性被强制设置为none

    • 绝对定位元素对其他元素的影响

      绝对定位元素不会对其他任何元素造成任何影响

    • 绝对定位元素的位置

      可通过left、top、right、bottom来设置(都可以设置负值)

      固定位置

      position:fixed;

      元素的包含块:视口;(即:移动的起始位置为视口的左上角)

      偏移量的设置(移动)

      起始位置是视口的左上角

      适用场景:

      pc端:页面头部

      移动端:footer

      以下五个情况的元素,推荐为aside

      1.AD(广告)

      2.侧边栏

      3.目录

      4.回到顶部

      5.即时通讯

      绝对位置

      position:absolute;

      寻找包含块:包含我,离我最近元素的position值不等于static。

      适用场景:2个及以上的标签需要重叠在一起的时候

    展开全文
  • 相对定位(relative):先说相对定位:跟它的名一样,相对嘛,要有一个参照物,但这个参照不是别的,是它自己在原来文档流中的位置。相对定位之后的对象并没有完全从文档流中脱离,这个对象原来在文档中的位置保留着...

    相对定位(relative):

    先说相对定位:跟它的名一样,相对嘛,要有一个参照物,但这个参照不是别的,是它自己在原来文档流中的位置。相对定位之后的对象并没有完全从文档流中脱离,这个对象原来在文档中的位置保留着(站着茅坑不拉屎),偏移后的对象会把其它的层遮罩住。

    将相对定位特征总结如下:

    ①相对定位的元素,在没有设置宽度的情况下,宽度是整个浏览器的宽度,或者是依赖于父元素的宽度。

    ②相对定位的块状元素相对于原来位置移动,移动后仍然占据文档流的位置,不影响其他元素的布局

    下面通过代码进行验证

    在浏览器中放置5个盒子,用不同的颜色来表示,代码如下

    HTML代码

    fb054576e2a0c31366460b5aa23f4d51.png

    CSS代码

    96fd5a5c451542980ba8dabbc0a1d53a.png

    最初效果图

    2b3249a16d075ca8e0965b04a7397aa1.png

    给第三个盒子设置相对定位

    5e54905c40edb0d66b187d42a6aff695.png

    元素相对于原来位置偏移,宽高都没变,撑大了容器,还占据着原来在文档流中的位置,对其它元素的布局没有产生影响。

    cca863f4311cac2429b08f891db2a6eb.png

    绝对定位(absolute):

    被绝对定位的对象将从文档流中脱离,绝对定位的参照位置就不再是自己了,是哪个,就看它的上级或上上级有没有定位了,使用left,right,top, bottom等属性相对于其最接近的一个有相对或者绝对定位设置的父级对象进行绝对定位,如果父级没有设置定位属性,则会相对于html根元素进行定位,看了一些帖子发现有人认为如果父对象没有设置定位属性,则会相对于body进行定位,这个说法是不对的。

    将绝对定位的特征总结如下:

    ①绝对定位的块状元素在没有设置宽度的情况下,宽度由元素里面的内容决定

    ②脱离后原来的位置相当于是空的,下面的元素会来占据位置

    ③绝对定位的对象相对于距离自己最近的设置了相对定位或者绝对定位的父对象进行定位

    ④如果父元素没有定位,则相对于html根元素定位

    下边还是通过这五个盒子的偏移来验证

    (1)块元素无偏移值

    上边的5个盒子,只给box5一个绝对定位,无偏移值。此时块状元素只是漂浮在原来的位置,如果后边还有块状元素,将会占据他在文档流中的位置,我们在box5下边加上一个box6看一下效果。

    说明:绝对定位的块状元素在没有定义宽度的情况下,宽度由元素里面的内容决定。

    44985fde516827eee0155fab760a44f8.png

    效果图如下

    d122e2006797bb623b5a26d976a92e67.png

    加一个box6的效果

    30e1ea9d2c94912884a5ba1f3e51934d.png

    从图中可以看出,box6已经占据了box5在文档流中的位置了。

    (2)有偏移值

    如果设置了偏移值而父元素没有设置相对定位或绝对定位的情况下,元素相对于根元素定位(即html元素,注意是相对于根元素,而不是相对于body)用box5的偏移来验证。

    ①给box5一个偏移量,父元素没有相对或者绝对定位

    5d642a717fbbaf77d16e30c00b15c469.png

    效果图如下

    494e84f54a837758b7ff6bad724c0577.png

    ②给box5同样的偏移量,给body元素一个绝对定位(body元素设置为了absolute,绝对定位的块状元素的宽度由最长p决定,宽度变小了):

    aaf987a6627b648e83ce9697bd9c7b2c.png

    效果图如下

    911bac05b58c25cc5df4d907ebdab04b.png

    图片发自App

    从上边的两张效果图明显发现相对于根元素的定位与相对于body的定位是不相同的,主要的区别在于有没有算进去body的margin值。

    下面在五个盒子外边再嵌套三个父盒子,并给这三个父盒子一个定位,来验证是否是根据最近定位的父元素进行偏移。

    代码如下

    HTML代码

    9e733451978c126e6e62886eff2a71a6.png

    CSS代码

    35baf65d16eec207ade5e0cee73d741e.png

    效果图

    f77670e0be20938bc9cf766eaf5f4610.png

    图片发自App

    从上边很明显看的出来box5是相对于第三层容器也就是离它最近的容器进行的定位。有兴趣的可以试一试,把第三层容器的定位去掉,看看是不是就相对于第二层容器定位了,我已经验证过,就不放图了。

    有同学会问,为什么要把最外层的盒子设置为绝对定位,其它两个设置为相对定位,这个定位的方法区别主要影响的是盒子的宽度,相对定位的块元素在没有设置宽度的情况下,它的宽度就是默认的浏览器的宽度,有父元素的情况下,则它的宽度由父元素决定,如果这个块元素的内容过多,则会把父元素也撑大。

    ,也就是说相对定位的块元素的宽度依赖于父元素,那么如果把这三个容器都设置为绝对定位会有什么效果呢,先来看一看效果图

    d8461a6782387e1c6354af287b840417.png

    图片发自App

    从图中可以看出,第三层容器的宽度已经不再依赖于父元素,因为它从文档流中脱离出来了,他自己是独立的,而他的宽度只能由内容来决定。总结起来就是,绝对定位的块元素宽度由自己的内容决定,相对定位的块元素在没有设定宽度时,默认就是浏览器的宽度。但是不管宽度怎样,绝对定位的元素都会找到离自己最近定位(绝对或者相对定位)的父元素来进行定位。

    总结:

    relative:定位是相对于自身位置定位(设置偏移量的时候,会相对于自身所在的位置偏移)。设置了relative的元素仍然处在文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度。

    absolute:定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的,如果没有父元素设置绝对或相对定位,则元素相对于根元素即html元素定位。设置了absolute的元素脱离了文档流,元素在没有设置宽度的情况下,宽度由元素里面的内容决定。脱离后原来的位置相当于是空的,下面的元素会来占据位置。

    说明:本文的实验结果是在父元素及子元素没有设置固定宽度的情况下得来的,如果父元素设置了固定的宽度,他的子元素无论是绝对定位还是相对定位的子元素都不能超过其父元素的宽度,父元素是老大哥,谁都不能超过他。

    展开全文
  • 相对定位 相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。 2、不脱标,老家留坑,形影分离 也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘...
    • 相对定位
    • 相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。

    • 2、不脱标,老家留坑,形影分离
          也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘。
      3、相对定位用途
      相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用:
      1) 微调元素
      2) 做绝对定位的参考,子绝父相(讲绝对定位的时候说)
      4、相对定位的定位值
      可以用left、right来描述盒子右、左的移动;
      可以用top、bottom来描述盒子的下、上的移动。
    • 绝对定位
    • 1、 绝对定位脱标
          绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。
          绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽、高了:
      
      2、参考点
          绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角:
          如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角:

    绝对定位的儿子,无视参考的那个盒子的padding。 绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。如果想让盒子居中,就用 left:50%; margin-left:负的宽度的一半。

      

    • 固定定位
    • 固定定位,就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。
      固定定位脱标!
      IE6不兼容。

       

    • z-index
    • ● z-index值表示谁压着谁。数值大的压盖住数值小的。
      ● 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。
      ● z-index值没有单位,就是一个正整数。默认的z-index值是0。
      ● 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
      ● 从父现象:父亲怂了,儿子再牛逼也没用。

       

     

     
     
     
     
     
     
     
    展开全文
  • 生成相对定位元素元素所占据的文档流的位置不变元素本身相对文档流的位置进行偏移 absolute 生成绝对定位元素元素脱离文档流不占据文档流的位置可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者...

    1. 关于定位

    • 我们可以使用 css 的 position 属性来设置元素的定位类型

    postion 的设置项如下

    设置项 释义
    relative 生成相对定位元素
    元素所占据的文档流的位置不变
    元素本身相对文档流的位置进行偏移
    absolute 生成绝对定位元素
    元素脱离文档流
    不占据文档流的位置
    可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位
    如果找不到,则相对于 body 元素进行定位
    fixed 生成固定定位元素
    元素脱离文档流
    不占据文档流的位置
    可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位
    static 默认值,没有定位
    元素出现在正常的文档流中
    相当于取消定位属性或者不设置定位属性

    简单地说

    1. relative
      • 相对定位
      • 不脱离文档流
      • 相对于自己本身的位置进行定位
    2. absolute
      • 绝对定位
      • 脱离文档流
      • 位置相对于已定位的父级
      • 如果没有父级,或父级没有定位,那么相对于文档 (body)的 00 点
    3. fixed
      • 固定定位
      • 脱离文档流
      • 位置相对于浏览器窗口 进行定位

    少废话,上例子

    例 1

    <!-- 例1 -->
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>test</title>
            <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
        </head>
        <body>
            <div class="box1">box1</div>
        </body>
    </html>
    <!-- 例1.1 -->
    *{
        margin: 0;
        padding: 0
    }
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background: red;
    }
    • 效果截图 1

    1576387-20190503095402276-1552885049.png

    <!-- 例1.2 -->
    *{
        margin: 0;
        padding: 0
    }
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background: red;
        margin:0 200px;     /* 加了这句 */
    }
    • 效果截图 2

    1576387-20190503101029921-1667400427.png

    <!-- 例1.3 -->
    *{
        margin: 0;
        padding: 0
    }
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background: red;
        /* 通过 position: 设置元素的定位
            relative: 相对定位
                以元素本身位置为参考点进行偏移
                不会脱离文档流 */
        position: relative;
        left: 300px;
        top: 100px;
    }
    • 效果截图 3

    1576387-20190503101224866-1698487190.png

    <!-- 例1.4 -->
    *{
        margin: 0;
        padding: 0
    }
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background: red;
        margin:0 200px;
        /* 通过 position: 设置元素的定位
            relative: 相对定位
                以元素本身位置为参考点进行偏移
                不会脱离文档流 */
        position: relative;
        left: 300px;
        top: 100px;
    }
    • 效果截图 4

    1576387-20190503101418921-1578581338.png

    例 2

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>test</title>
            <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
        </head>
        <body>
            <div class="box1">box1</div>
            <div class="wrap">
                <div class="box2">box2</div>
            </div>
        </body>
    </html>
    *{
        margin: 0;
        padding: 0
    }
    div{
        width: 200px;
        height: 200px;
    }
    .wrap{
        width: 500px;
        height: 300px;
        margin: 0 100px;
        border: 2px solid;
        /* position: relative; 添加定位属性,若加上这一句,效果见交过截图 6 */
    }
    .box1{
        background: red;
        margin:0 200px;
        position: relative;
        left: 200px;
        top: 100px;
    }
    .box2{
        background: green;
        /* 设置绝对定位
            position: absolute;
                以有定位属性的父级为参考点进行偏移,
                如果父级元素没有定位属性,继续向上一级元素找
                如果找到,就以该级元素为参考进行偏移,
                如果找不到,一直想向上寻找,直到 body 为止
            会脱离文档流,不占文档位置 */
        position: absolute;
        left: 100px;
        top: 100px;
    }
    • 效果截图 5

    1576387-20190503102646252-1972370195.png

    • 效果截图 6

    1576387-20190503102709382-1285310372.png

    2. 定位元素的特性

    • 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

    3. 定位元素的层级

    • 定位元素是浮动在正常的文档流之上的
    • 可以用 z-index 属性来设置元素的层级

    少废话,上例子

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>test</title>
            <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
        </head>
        <body>
            <div class="box1">box1</div>
            <div class="box2">box2</div>
        </body>
    </html>
    *{
        margin: 0;
        padding: 0
    }
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background: red;
        position: relative;
        left: 100px;
        top: 100px;
    
        /* 设置定位的层级 谁在后面定位谁就在上面
            改变层级使用 z-index:
        z-index: 2; 加上这句,效果见效果截图 8 */
    }
    .box2{
        background: green;
        position: absolute;
        left: 100px;
        top: 100px;
    }
    • 效果截图 7

    1576387-20190503102839720-775166581.png

    • 效果截图 8

    1576387-20190503102904769-1188161169.png


    参考:北京图灵学院的 Web 前端公开课

    转载于:https://www.cnblogs.com/yorkyu/p/10804481.html

    展开全文
  • 2.2.2 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。如果将top设置为20像素,...
  • 相对定位和绝对定位的区别是什么? 绝对定位的特性: 1、当子元素没有父容器时,子元素会依赖body进行定位 2、当父容器中嵌套了一个子元素,此时父容器没有设置定位属性,而子元素设置了定位属性,那么这个子...
  • } .li2{ /*相对定位:相对于他原来的位置,对后续元素没有影响*/ position: relative; top: 50px; left: 50px; } </style> <body> <ul> 第一行</li> 第2行</li> 第3行</li> ...
  • 1、绝对定位 position:absolute; 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果...
  • CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效...
  • CSS里的position属性可以用来对一个对象相对于某个容器块(containing block)进行相对定位。该属性有4个值:'static'(静态), 'absolute'(绝对), 'fixed'(固定)以及'relative'(相对)。静态定位是默认值,...
  • <!... <... <head> ...meta charset="UTF-8">...相对定位</title> <style> /*所谓的相对定位, 即是在原来位置的基础上, 进行位置的调整。*/ .aaa{ width:...
  • 1.相对定位 有了以上的定义,来看一段代码: <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Document title > < style type = "text/css" > ...
  • cp :https://blog.csdn.net/web_yh/article/details/53239372 一、盒子模型: 标准模式和混杂模式(IE)。在标准模式下浏览器按照规范呈现页面;在混杂模式下,页面以一种比较宽松的向后兼容的方式显示。混杂...
  • 有个问题,div+css的页面,1 最外层div的position是absolute还是relative? 最外层的div居中。 position:relative; Margin-top,Margin-bottom:0; Margin-left,Margin-right:auto; 为了防止div出现超过网页宽度...
  • 二:绝对定位和相对定位 绝对定位(absolute)的概念 :如果设置它的偏移量,将会影响其他元素的位置。如下图(图来自百度)  设置绝对定位时,元素会相对于离自己最近的设置了绝对定位的父元素进行...
  • 1、定位样式: 1.四个坐标 1)left top 左上角 2)right top 右上角 3)left bottom 左下角 4)right bottom 右上角 .img{ width:100px; height:100px; background: #888; position: absolute; left:100px...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 727
精华内容 290
关键字:

web相对定位