zoukankan      html  css  js  c++  java
  • html中定位详解

    首先,我们来讨论一下html中共有几种定位方式:静态定位(static),相对定位(relative),绝对定位(absolute,fixed).其中fixed又叫固定定位,它是属于绝对定位的一种,但是又有所不同。下面我就来具体讲解一下。

    首先,static定位就是我们html中默认的定位方式,就是元素就是从上到下,从左到右。

    相对定位(relative),相对定位。元素设置了相对定位后,元素是相对于他原来的位置发生偏移,但是元素并没有脱离标准文档流,也就是他原来的位置还是存在的,其他元素不能移到他的原来位置(相当于虽然他原来位置没有东西了,但是位置还是占着的,其他元素不可以移到该位置上)。

    绝对定位(absolute)。绝对定位比较复杂了,首先我们结合绝对定位和固定定位一起来讲解

    首先,相同点。

    绝对定位不是相对于自己原来位置的偏移。

    两者都会脱离标准文档流,这句话是什么意思?其实估计大家都不是很清楚,也就是说他移动后他原来的位置就空了,后面的元素会自动移动上去,其次,他现在的位置也不再标准文档流当中,也就是说他现在的相当于浮动在标准文档流之上。

    不同点:

    首先分两种情况来讨论

    一,设置了偏移量

     举一个例子: postition:absolute ;left:23px;top:12px;或者postition:fixed ;left:23px;top:12px;这样的话设置absolute方式的是相对于距离他最近的祖先元素,且该祖先元素也设置了定位方式。来偏移的。而fixed则是相对于body元素的位子来偏移的。

    第二种情况:设置了定位,但是没有设置偏移量时,两者都是相对于父类来说的,他们都会移动到父类的左上角。

    第二个不同点:

    设置了fixed的定位方式的元素是不会随着滚动条的滚动而发生位置的变化的,而设置abslute的定位方式的会发生未知的变化。

  • 相关阅读:
    Springboot 连接数据库
    线程专题 -- 线程的创建,状态,工作过程,常见方法
    MySQL中UPDATE语句里SET后使用AND的执行过程和结果分析
    SpringCloud | 通过电商业务场景让你彻底明白SpringCloud核心组件的底层原理
    避坑 | Java8使用并行流(ParallelStream)注意事项
    Spring--AOP、通知的执行顺序
    JVM--理解介绍
    JSF学习实战
    策略模式--实战1
    二叉树、二叉查找树、平衡树和红黑树概念
  • 原文地址:https://www.cnblogs.com/yuaima/p/5038269.html
Copyright © 2011-2022 走看看