zoukankan      html  css  js  c++  java
  • position元素的定位

    position属性规定元素的定位类型。

    position:static | relative | absolute | fixed | inherit

    static: 默认值,没有定位,元素出现在正常的文档流中。

    relative: 生成相对定位的元素,相对正常元素进行定位。

    absolute: 生成绝对定位的元素,相对于static以外的第一个父元素进行定位。

     fixed: 生成绝对定位的元素,相对于浏览器窗口进行定位。

     inherit: 从父元素继承position属性的值。

    相对定位和绝对定位的元素可以设置z-index控制之间的显示层级顺序,z-index数值大的显示在最上层。

    但是在IE7以下浏览器有一个问题,2个不同元素下的定位子元素层级顺序显示不以z-index大小为准,是以父元素的z-index大小为准。

    <style>
        .wrap{position: relative; width:800px; height: 400px; margin:0 auto; background:#f1f1f1;}
        .in-abs{position: absolute; top:20px; left:20px; width:80%; height: 300px; background:#f90; color:#fff;}
        .in-abs-in-inline{position: relative; top: 30px; left: 40px; z-index:9; width: 20%; height: 100px; background: #09f; color: #000;}
        .in-abs-in{position: absolute; top: 30px; left: 10px; width: 80%; height: 200px; background: #fff; color: #000;}
    </style>
    <div class="wrap">
        <span class="in-abs">
            web前端
            <span class="in-abs-in-inline">relative定位,回归正常文档流</span>
            <span class="in-abs-in">javascript</span>
        </span>
    </div>
  • 相关阅读:
    #pragma
    I/0概念介绍
    Android Eclipse 源码工程 调试
    SHELL四则运算和比较
    Android源码中添加 修改应用
    android ubuntu9.10 源码的编译 Eclipse工程 Contacts编译 应用加载
    【Wonder原创】LogMiner使用实践
    【转】Oracle入门教程,新手必读
    【Wonder原创】关于MSSQL通过DBLink访问Oracle问题
    【杂记】SQLServer
  • 原文地址:https://www.cnblogs.com/wanbi/p/4179758.html
Copyright © 2011-2022 走看看