为了账号安全,请及时绑定邮箱和手机立即绑定

css定位 position

难度初级
时长 1小时18分
学习人数
综合评分9.33
96人评价 查看评价
9.6 内容实用
9.2 简洁易懂
9.2 逻辑清晰
  • relative相对于自身位置发生变化
    查看全部
    0 采集 收起 来源:position-relative

    2020-04-04

  • {position:relative}相对定位 默认后写的元素大于先写的层级

    left ,top,以左上端为原点,向右下移动

    例;left:50px

           top:0px

    即相对于左端移动50px


    2、设置left,top属性时,坐标轴往右是x正方向,往下是y轴正方向,设置right或者bottom的时候,会将对应坐标表轴变成反方向,当设置了right,则往左是x轴正方向,当设置了bottom,则往上是y轴正方向。

    查看全部
    0 采集 收起 来源:position-relative

    2020-02-21

  • 一、标准流

    1、块级元素:div、table表格、H1~H6、p段落、有序无序列表(ol、ul、li)——纵向排列

    2、内联元素:a 超链接、span 文字、img 图片、input 空键——横向排列

    查看全部
    1 采集 收起 来源:文档流

    2020-02-21

  • left:0(px可省略)

    查看全部
  • 盒子模型   通过改变元素内外边距来实现元素的移动

    定位  通过元素位置移动改变出现在网页的位置

    center top  居中置顶   url 半透明  

    no-repeat  不平铺

    图片居中

    left:50%

    top:50%

    margin-left:-180px

    margin-top:-180px

    查看全部
  • z-index 只作用于有定位属性的元素

    子元素层级依附于父元素层级

    查看全部
    0 采集 收起 来源:z-index

    2020-02-19

  • fixd 固定定位   不受制于任何的元素

    inherit  继承父元素的定位属性

    查看全部
    0 采集 收起 来源:position-inherit

    2020-02-19

  • relative:相对定位 默认后写的元素大于先写的层级

    left ,top,以左上端为原点,向右下移动

    例;left:50px

           top:0px

    即相对于左端移动50px

    查看全部
    0 采集 收起 来源:position-relative

    2020-02-19

  • 标准流

    块级元素 :div   h1-6  有序无序列表 (ol ul li)p段落 纵向排列

    内联元素:img  a  span文字 input控件  横向排列

    查看全部
    0 采集 收起 来源:文档流

    2020-02-19

  • ul  li内容

    查看全部
  • 定位 5种方法!!继承等

    查看全部
    0 采集 收起 来源:position-inherit

    2019-12-03

  • 设置left,top属性时,坐标轴往右是x正方向,往下是y轴正方向,设置right或者bottom的时候,会将对应坐标表轴变成反方向,当设置了right,则往左是x轴正方向,当设置了bottom,则往上是y轴正方向。======说一个老师没讲出来的更简单的理解,比如设置left:50px,top:50px,翻译过来就是左上,那就以文档流左上角为原点移动50px,如果是right:50px, top:50,翻译过来是右上,那就以文档流的右上角为原点,距离垂交线右边50px,上面50px,即左下各移动50px,其实也可以按照老师说的,当成左边为x轴正方向,下面为y轴正方向,也是左下各移动50px

    查看全部
    2 采集 收起 来源:position-relative

    2019-11-23

举报

0/150
提交
取消
课程须知
1、需要有HTML基础知识。 2、需要对css基础样式有一定的掌握和了解
老师告诉你能学到什么?
1、运用定位知识去实现固定定位 2、运用定位知识去实现相对定位

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!