美文网首页
CSS(二)关于position

CSS(二)关于position

作者: 海客无心 | 来源:发表于2017-04-23 21:19 被阅读0次

position有五种取值

  • static:无特殊定位,小透明,都快忘了它了

    • 即是正常的文档流,不设置position默认就是它。
  • relative:相对定位的父亲

    • 如果仅仅是position:relative,它的表现同static一样。
    • 需要加top,bottom,left,right使其偏离正常位置。
    • 注意:relative不会使元素脱离文档流。即是说,其他元素不会因为它(relative的元素)的改变而改变。
  • fixed:下拉滚动条,它还在那里

    • 相对于浏览器可视窗口来定位,如我们要让上方导航栏不论风吹雨打(上下滚动)一直显示,就要给它设置 position:fixed
  • fixed会使元素脱离文档流

  • absolute:绝对定位,我想在哪里在哪里

  • 如果有relative,则绝对定位以relative的元素为爸爸,否则按照body定位。

  • 脱离文档流,原来的空间会被下面的文档流元素占掉!!

  • inherit:其实就是继承父级元素的position属性。

相关文章

  • CSS(二)关于position

    position有五种取值 static:无特殊定位,小透明,都快忘了它了即是正常的文档流,不设置position...

  • 【图解CSS#Position】

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式。...

  • 关于css

    在最近的学习中,对css position 理解不好,在网上找了找,觉得关于css position 看一下文章就...

  • css布局之上下两行布局(上面固定高度,下面自适应)

    方法一: 利用position绝对定位+BFChtml: css: 方法二:flex布局 html: css:

  • CSS定位

    在CSS中关于定位的内容是:position:relative | absolute | static | fix...

  • 关于CSS Position(定位)

    在CSS中,我们是通过position定位属性来进行定位的,它有如下几个属性值。常见的属性有如下几个: absol...

  • 关于CSS定位

    在CSS中关于定位的内容是:position:relative(相对定位)absolute(绝对定位) ...

  • 2017-12-30

    position:absolute and position:relative 的理解 Absolute,CSS中...

  • 小程序CSS知识点

    一、flex布局Flex 布局教程:语法篇Flex 布局教程:实例篇 二、CSS position 属性总结CSS...

  • css粘性定位position: sticky

    css粘性定位position:sticky问题采坑position: sticky 详解(防坑指南)CSS中po...

网友评论

      本文标题:CSS(二)关于position

      本文链接:https://www.haomeiwen.com/subject/jpnyzttx.html