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的定位方式的会发生未知的变化。

  • 相关阅读:
    css中盒模型的理解与整理
    Java从入门到精通——数据库篇Mongo DB GridFS文件系统
    Java从入门到精通——数据库篇Mongo DB 导出,导入,备份
    Java从入门到精通——数据库篇Mongo DB 安装启动及配置详解
    MySQL基于mysqldump快速搭建从库
    Linux下C语言操作MySQL数据库
    html dl dt dd 标签语法与使用
    人的一切痛苦,本质上都是对自己的无能的愤怒
    游泳健康好处多
    从疲劳到猝死只需6步!
  • 原文地址:https://www.cnblogs.com/yuaima/p/5038269.html
Copyright © 2011-2022 走看看