zoukankan      html  css  js  c++  java
  • 定位position

    css属性,position的默认值static,只有有这个属性的元素的默认值都是static.

    position:relative;

    生成相对定位的元素,相对于其正常位置进行定位。

    因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

    position:absolute;

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

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    浏览器的高度一般不需要去定义一个固定值,它本身会自动根据内容的高度变化,而浏览器的宽度和高度就是body元素的宽度高度。

    一般我们进行使用position属性进行绝对定位时,我们一般不会是直接就在body内就写一个div来相对于body定位,而会是在一个有指定的宽度和高度值的div容器内嵌套那个需要定位的div。同时,你的外层div的position属性必须是absolute/relative。这样子你内层的div进行绝对定位时,才能以外层的这个div作为父元素进行定位。代码如下:

    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8" />
            <title>postion-absolute</title>
            <style type="text/css">
                body{margin:0;padding:0;}
                
                .outside
           
    {
            
    width:400px;height:200px;background-color:red;position:relative;/×position的值也可以为absolute×/
           } .inside { background-color:blue; width:60%; height:20%; position:absolute; left:10%; top:10%; } </style> </head> <body> <div class="outside"> <div class="inside">I am a absolute position div.</div> </div> </body> </html>
  • 相关阅读:
    sql分页存储过程疑惑:Row_Number与临时表哪个好?
    SQL之剪切
    在sqlserver2005中安装sql server 2000的示例数据库northwind
    安装SQL2005示例数据库
    Firefox浏览器中,Flex的FileReference上传文件,引发IOError
    Java获取方法的调用者
    ABAP screen常见语法
    XPO永久删除记录方法
    XPO的UpCasting
    在ASP.NET项目中使用XPO的最佳准则
  • 原文地址:https://www.cnblogs.com/shuman/p/3602787.html
Copyright © 2011-2022 走看看