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布局:三列布局,中间内容优先加载
    解决在IE下label中IMG图片无法选中radio的几个方法
    CSS架构:最新最佳实践
    JavaScript登陆弹窗,可拖拽
    网站变成灰色的代码
    5个jQuery的备选轻量级移动客户端开发(Mobile development)类库
    jQuery 底部漂浮导航当前位置突出 + 锚点平滑滚动
    Exchange 2007 自定义传输规则
    基于jQuery打造TabPanel
  • 原文地址:https://www.cnblogs.com/yuaima/p/5038269.html
Copyright © 2011-2022 走看看