zoukankan      html  css  js  c++  java
  • Position属性:static、fixed、absolute、relative

    用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。

    Position属性有四个值:static、fixed、absolute和relative,

    后面两个在布局中的定位里是经常用到的,顾名思义,

    absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。

    ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。 

    1、当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时,只有left起作用。

    2、当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。 

    在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。

    3.fixed:它可以让HTML元素脱离文档流固定在浏览器的某个位置。

    IE7、Firefox、Opera,都支持CSS的{position:fixed},当然其中的left,right,top,bottom使用同上面两个,但是ie<=6以下的版本不支持这个属性!

    <!--IE6中利用容器对溢出内容的处理方式来实现的-->
    <!--[if IE 6]>
    <style type="text/css">
    html{overflow:hidden;}
    body{height:100%;overflow:auto;}
    #fixed{position:absolute;right:17px;}
    <!--fixed元素的绝对位置是相对于HTML元素来说,滚动条是body元素的,这是设置right:17px的原因-->
    </style>
    <![endif]-->
    <!--[if lt IE 6]>
    <style type="text/css">
    #fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
    </style>

    <![endif]-->

    //可以参考下面的这个写法进行输写

    //属性前面什么都不加代表所有浏览器都识别。加下划线的就只有IE6能识别

     .block { overflow: hidden; position:fixed; _position:absolute;_top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - 65 - 343)); _bottom:auto; 126px;}

    一、条件注释简介

        IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法。
        条件注释只能用于IE5以上。
        如果你安装了多个IE,条件注释将会以最高版本的IE为标准。
        条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
        IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

    二、条件注释属性

        gt : greater than,选择条件版本以上版本,不包含条件版本
        lt : less than,选择条件版本以下版本,不包含条件版本
        gte : greater than or equal,选择条件版本以上版本,包含条件版本
        lte : less than or equal,选择条件版本以下版本,包含条件版本
        ! : 选择条件版本以外所有版本,无论高低

    三、条件注释使用方法

    注意把代码中的<>换成英文中相应的大于或小于号

    <!--[if IE 5]>仅IE5.5可见<![endif]-->
    <!--[if gt IE 5.5]>仅IE 5.5以上可见<![endif]-->
    <!--[if lt IE 5.5]>仅IE 5.5以下可见<![endif]-->
    <!--[if gte IE 5.5]>IE 5.5及以上可见<![endif]-->
    <!--[if lte IE 5.5]>IE 5.5及以下可见<![endif]-->
    <!--[if !IE 5.5]>非IE 5.5的IE可见<![endif]-->

    下面的代码是在非IE浏览器下运行的条件注释

    <!--[if !IE]><!-->
    您使用不是 Internet Explorer
    <!--<![endif]-->
    <!--[if IE 6]><!-->
    您正在使用Internet Explorer version 6或者 一个非IE 浏览器
    <!--<![endif]-->

    4.static:默认值。无特殊定位,对象遵循HTML定位规则

    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    utils04_搭建私有Git服务器
    utils03_clone远程仓库
    java 22
    java 22
    java 22
    java 22
    java 22
    java 22
    java 22
    java 22
  • 原文地址:https://www.cnblogs.com/baixc/p/3414495.html
Copyright © 2011-2022 走看看