对于初学者来说，css的position定位问题是比较常见的。之前搞不清楚postion定位是怎么回事，排版一直歪歪斜斜的，老是排不好

css的定位一般来说，分为四种：

position:static;

position:relative;

position:absolute;

position:fixed;

其中：

1. static是默认属性，当不给定position属性时，系统会自动设置为static属性；

2.relative是相对属性，设定方法就是：position：relative;  这个相对属性，是针对他原来的位置进行相对，不是相对父元素，也不是相对根元素，这点要搞清楚，此处最容易混淆的地方

3.absolute是绝对定位，它的参照为父级元素，且父级元素的position属性为非 static ；如果父级元素position是static，那就接着向上找，找父级的父级，直到父级元素position 属性为非static 为止；如果全部父级元素position 属性都是static ,那它的参照就是body根元素

4.fixed是固定定位，定位也是一个绝对值，不过它的参照不是父级元素，而是可视窗窗口；（通常用在固定位置 的导航，或者返回顶部按钮）

例如：

1.position:static;不设定时，自动设置position为static;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

     .box1{

         width:300px;

         height:200px;

         background:red;

     }

     .box2{

         width:200px;

         height:200px;

         background:blue;

     }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>

</html>

　　

2. position:relative  设定相对属性

设置相对属性后，原来元素所占据的空间不会变化，当给定上、下、左、右相对偏移量后，元素会相对原来的位置进行偏移

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

     .box1{

         position:relative;

         left:80px;

         top:40px;

         width:300px;

         height:200px;

         background:red;

     }

     .box2{

         width:200px;

         height:200px;

         background:blue;

     }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>

</html>

　　

3. position:absolute 设定绝对定位，参照父级元素进行定位

参照根元素body绝对定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

     .box1{

         left:80px;

         top:40px;

         width:300px;

         height:200px;

         background:red;

     }

     .box2{

         position:absolute;

         width:200px;

         height:200px;

         background:blue;

         top:40px;

         left:80px;

     }

    </style>

</head>

<body>

    <div class="box1">

        <div class="box2"></div>

    </div>

</body>

</html>

　　

参照父级div.box1进行绝对定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

     .box1{

         position:relative;

         left:80px;

         top:40px;

         width:300px;

         height:200px;

         background:red;

     }

     .box2{

         position:absolute;

         width:200px;

         height:200px;

         background:blue;

         top:40px;

         left:80px;

     }

    </style>

</head>

<body>

    <div class="box1">

        <div class="box2"></div>

    </div>

</body>

</html>

4. position：fixed;  设定固定定位；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

     .box1{

         position:relative;

         left:180px;

         top:140px;

         width:300px;

         height:200px;

         background:red;

     }

     .box2{

         position:fixed;

         width:200px;

         height:200px;

         background:blue;

         top:40px;

         left:80px;

     }

    </style>

</head>

<body>

    <div class="box1">

        <div class="box2"></div>

    </div>

</body>

</html>

　　

以上就是个人对于css 定位的理解，如需真正掌握，还需要多练习几次

关于CSS 的position定位问题的更多相关文章

  1. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  2. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  3. 十步图解CSS的position

    CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...

  4. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. CSS的position(位置)

    position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...

  7. CSS的position设置

    CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...

  8. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  9. css的position中absolute和fixed的区别

    fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...

随机推荐

  1. man page里面函数后面的括号中的数字代表的含义。

    Linux下最通用的领域及其名称及说明如下:领域 名称 说明 1 用户命令, 可由任何人启动的. 2 系统调用, 即由内核提供的函数. 3 例程, 即库函数. 4 设备, 即/dev目录下的特殊文件. ...

  2. lintcode.44 最小子数组

    最小子数组   描述 笔记 数据 评测 给定一个整数数组,找到一个具有最小和的子数组.返回其最小和. 注意事项 子数组最少包含一个数字 您在真实的面试中是否遇到过这个题? Yes 哪家公司问你的这个题 ...

  3. Install Oracle 12c R2 on CentOS 7 silent

    准备工作 VMware 虚拟机 CentOS 7 17.08 系统安装包镜像 Oracle 12c R2 软件安装包 配置 yum 库并安装如下包 binutils-2.23.52.0.1-12.el ...

  4. 解决Maven管理的项目下"Missing artifact xxx bundle"问题

    例如使用maven编译使用了mina的包的工程,出现如下提示:  [INFO] Scanning for projects... [INFO]                             ...

  5. 初识ELF格式 ABI,EABI,OABI

    尽管每天都在调用linux的elf文件做各种事,但却很少去了解他,最近尝试在orangepi上编译个elf到android手机上运行,因为两个CPU都是ARMv8的.结果运行失败了.遂查找原因.结果挖 ...

  6. 关于Linux的虚拟内存管理

    在linux中可以通过free指令查看当前内存,在后面加-m参数能让数字单位显示为MB. 一般机器,有一个实际内存和一个虚拟内存. swap就是虚拟内存,这个虚拟内存可以是文件,也可以是磁盘分区.通常 ...

  7. kettle的HTTPPOST控件发送WSDL的webservice请求配置

    1.webservice请求的URL:http://pubservice.rjhn.com.cn/AppserviceTest/JsonWcfService.svc?WSDL 2.使用SOAPUI测试 ...

  8. 异常 SQLErrorCodes loaded: [DB2, Derby, H2, HSQL, Informix, MS-SQL, MySQL, Oracle, PostgreSQL, Sybase]

    使用Spring 的JDBCtemplate 调用数据库的时候 出现了如下的问题 SQLErrorCodes loaded: [DB2, Derby, H2, HSQL, Informix, MS-S ...

  9. zookeeper环境搭建及使用

    本文只讲解搭建步骤,先不讲原理相关知识 一.zookeeper下载地址 本文使用版本为zookeeper-3.4.10.tar.gz 地址:http://mirrors.shuosc.org/apac ...

  10. Azure Powershell使用已有Image创建ARM非托管磁盘虚拟机

    生成Image映像文件,记录好Image的URL(下面URL为测试URL,具体请参考实际):ImageURL:https://hlmrgstoragen.blob.core.chinacloudapi ...