zoukankan      html  css  js  c++  java
  • position

    position:absolute——绝对定位元素,脱离了文本流(即在文档中已经不占据位置)。
    1、absolute定位必须指定 left , right , top , bottom 属性中的至少一个,在没有设定TRBL值时元素的位置遵从正常的HTML布局规则。
    2、设定TRBL时,以最近有position定位(relative、absolute、fixed)的先级元素为原点(没有这样的先级元素则以浏览器左上角为原点)进行定位。
    3、position:absolute会使元素会自动变为以 display:inline-block 的方式显示。

    详见position:absoulate demo

    position:relative——相对定位,就是相对于元素本身在文档中应该出现的位置来移动这个元素,通过TRBL来移动元素的位置(实际上该元素依然占据文档中原有的位置,只是视觉上相对原来的位置有移动)。
    1、原来的位置还是被它占着(你看上面的红色Div并没有向上移动挨着蓝色Div,就是这个原因),其它元素不能占有它的位置。

    详见position:relative demo

    position:fixed——固定定位,与absolute定位类型类似,但它始终以是视图(屏幕内的网页窗口)左上角为原点进行移动,因为网页窗口是固定的,所以它不会随浏览器滚动条的滚动而变化。
    1、IE6不支持此属性。
    2、用position:absolute+js可以解决IE6的兼容问题(如在ie6-position-fixed.css中用js动态算top的高度)。

    详见position:fixed demo

  • 相关阅读:
    linux shell 小技能
    Jenkins 2.60.x 2种发送邮件方式
    Linux wget 批量下载
    日语阅读-2-如何看“何々的”的用法
    日语阅读-1-如何看ほう的用法
    [日本语]初级语法
    Python基础
    Python基础(10)
    Python基础(8)
    Python基础(7)
  • 原文地址:https://www.cnblogs.com/junjieok/p/4558757.html
Copyright © 2011-2022 走看看