对于初学者来说，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. Java：设计类的继承关系时的技巧

    继承设计的技巧: (1)将公共操作和域放置在超类 (2)不要使用受保护的域 有些程序员认为,将大多数的实例域定义为protected是一个不错的主意,只有这样,子类才能够在需要的时候直接访问他们.然而 ...

  2. Spring Boot Maven Plugin（一）：repackage目标

    简介 Spring Boot Maven Plugin插件提供spring boot在maven中的支持.允许你打包可运行的jar包或war包. 插件提供了几个maven目标和Spring Boot ...

  3. log4j的基本使用和参数设定

    1.简介 apache的一个开放源代码项目. 精确控制日志的输出,包括输出的格式,输出的目的地,输出的过滤(不同级别日志的输出)等. 配置简单,不需要在代码中配置环境,支持两种配置文件格式,XML和J ...

  4. java控制台输入输出

    一.比较传统的输入方法用输入流,得到字符串后要另行判断.转换 案例 import java.io.BufferedReader; import java.io.IOException; import ...

  5. ArcGIS连带文字注记导出为CAD格式

    可以使用ArcGIS的"Export To CAD"工具将点.线.面等要素直接导出为CAD格式.如果要连带将ArcGIS中的文字标注导出为CAD格式要稍麻烦一点,下面是一个例子. ...

  6. Azure SQL Database (25) Azure SQL Database创建只读用户

    <Windows Azure Platform 系列文章目录> 本文将介绍如何在Azure SQL Database创建只读用户. 请先按照笔者之前的文章:Azure SQL Databa ...

  7. MUI开发记录

    最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~ HUuilder使用安卓模拟器 安卓模拟器有很多,我这里以夜神模 ...

  8. AngularJS–service(服务)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 服务 Angular的服务也是使用依赖注入(dependency injection ( ...

  9. Qt学习之路MainWindow学习过程中的知识点

    一.Qt的GUI程序有一个常用的顶层窗口,叫做MainWindow MainWindow继承自QMainWindow.QMainWindow窗口分成几个主要的区域:   二.QAction类 QAct ...

  10. hdu1556树状数组的区间更新单点查询

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...