zoukankan      html  css  js  c++  java
  • html的四中定位的理解

    html元素的定位用共有四种,static,relative,absolution,fixed

    1.static--------该定位是元素的默认定位,不能使用z-index层级分级的设置

    2.relative-------相对定位(不脱离文档流,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。)

    相对它的父级元素定位,可以使用z-index进行层级分级的设置

    3.absolition---------绝对定位(脱离文档流,不占用空间,并且如果该元素为内联元素则会变为块级元素)

    以最近的已定位父级元素定位,该父级元素必须是relative定位或absolution定位,否则就就以body为参照定位

    4.fixed:相对于浏览器的可视窗口固定,在调整窗口的大小时,位置变化只与窗口有关。

     下面为表格说明:

      父级标签无position限定 父级标签用static限定 父级标签用fixed限定 父级标签用absolute限定 父级标签用relative限定
    fixed 相对可视窗口 相对可视窗口 相对可视窗口 相对可视窗口 相对可视窗口
    absolute 相对body 相对body 相对body 相对父级 相对父级
    relative 相对文本流定位(与父级有间接关系)
    static

    相对父级定位

    top等限定无效

    相对父级定位

    top等限定有效

    相对父级定位

    top等限定有效

    相对父级定位

    top等限定有效

    相对父级定位

    top等限定有效

      

    图来自:----http://www.cnblogs.com/huangbx/archive/2012/08/15/2640734.html

  • 相关阅读:
    《深入理解 Java 虚拟机》学习笔记 -- 内存区域
    Guava -- 集合类 和 Guava Cache
    Spring 事务
    isEmpty 和 isBlank 区别
    @RequestBody, @ResponseBody 注解理解
    JSONObject 的使用
    loadrunner结果分析实战之页面细分
    loadrunner结果分析实战之分析图合并和分析图关联
    Linux如何查看端口被哪个进程占用?
    Loadrunner脚本录制HTTPs协议请求
  • 原文地址:https://www.cnblogs.com/xplj2013/p/8177588.html
Copyright © 2011-2022 走看看