对于网页页面布局来说，使用定位进行布局十分的方便。

　　绝对定位（使用绝对定位应当将父元素设置为相对定位，否则元素绝对定位的基准会一直寻找外层非静态定位元素）：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style>

            .box0{  width: 200px; height: 200px; position: relative;background: #cfa }

            .box0-1,.box0-2{  width: 50px; height: 50px; }

            .box0-1{  position:absolute; left: 50px; top: 50px; background: #567  }

            .box0-2{  position:absolute; left: 50px; top: 50px; background: #5a2}

        </style>

    </head>

    <body>

    <div class="box0">

        <div class="box0-1">0-1</div>

        <div class="box0-2">0-2</div>

    </div>

    </body>

</html>

　　结果如下：

0-1
0-2

　　如果不使用定位，要实现这样的效果，需要使用CSS属性为：

.box0{  width: 200px; height: 200px;background: #cfa; overflow: hidden }

.box0-1,.box0-2{  width: 50px; height: 50px; }

.box0-1{  margin: 50px 0 0 50px;  }

.box0-2{  margin: 0 50px 0 100px; }

　　使用边距和浮动是一个计算的过程，需要把握好每一个像素之间的关系。而使用绝对定位就是单纯的找位置，只要量得住，那就找的准，直接粗暴。需要注意的是，绝对定位的元素脱离了标准文档流，其本身的位置并不会保留，所以不能和浮动同时使用。并且也不建议和margin一起使用。

　　可以使用绝对定位将元素进行垂直方向的居中，需要配合CSS3的transform属性。

div {

  width: 100%;

  height: 100px;

  position: absolute;

  top: 50%;

  left:;

  transform:  translateY(-50%);

}

　　translateY函数是在元素Y方向上进行位移，使用百分比是是依照元素盒模型高度为100%的。这种定位可以用于元素高度不确定的情况，当然能使用弹性盒模型更加方便。

　　对于相对定位来说，由于元素本身的位置并不会消失，所以配合浮动更加好用，否则使用绝对定位更方便。

　　如下（便于观察，两个小块设置100的上外边距，此时原本位置应从下方3/4开始）：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style>

            .box1{  width: 200px; height: 200px; background: #abc }

            .box1-1,.box1-2{ width: 50px; height: 50px; margin-top: 100px; float: left; position: relative; }

            .box1-1{  top: 50px; left: 50px; background: #a2c; }

            .box1-2{  bottom: 50px; right: 50px; background: #22c; }

        </style>

    </head>

    <body>

    <div class="box1">

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

        <div class="box1-2">1-2</div>

    </div>

    </body>

</html>

　　结果如下：

1-1
1-2

　　相对定位的相对，就是指没有设置定位值，元素所在的位置，根据代码顺序，后者会对前者内容进行覆盖。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <style>

            .box2{  width: 200px; height: 200px; background: #ca9 }

            .box2-1{ width: 50px; height: 50px;   position: fixed; }

            .box2-1{  top: 50px; left: 50px; background: #4b3; }

        </style>

    </head>

    <body>

    <div class="box2">

        <div class="box2-1">我被固定了</div>

    </div>

    </body>

</html>

　　结果自己找吧：

我被固定了

　　结果不是根据父级元素定位的，显示不出（和上一篇的旋转一样）暂时不知道为什么。

　　总之，不同的定位方式有不同的作用，使用定位的目的是让代码简洁直观，所以具体使用哪一种应当根据实际情况而定。

CSS定位使用方法的更多相关文章

  1. 【java + selenium3】窗口基本操作及8大定位元素方法总结(一)

    一.窗口基本操作 1. 关于窗口的设置都是由window对象提供的: 获取window的对象方法: driver.manage().window(); //1.获取 window 对象 Window ...

  2. 简单CSS定位瀑布流实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）

    Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...

  4. WebDriver定位元素方法

    如果把页面上的元素看作人的话,在现实世界如何找到某人呢?方法有三: 一.通过人本身的属性,例如他的姓名,手机号,身份证号,性别,这些可区别他人的属性.在web页面上的元素也有这些属性,例如,id.na ...

  5. CSS垂直水平居中方法整理

    CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...

  6. 总结Selenium自动化测试方法（三）WebDriver定位元素方法

    三.WebDriver定位元素 推荐使用的webdriver是firefox,因为他的firebug更能可以帮助定位页面元素使用 # create a new Firefox session cls. ...

  7. CSS定位（postion）和移动(float)

    5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...

  8. CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

    其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...

  9. CSS实现三角形方法一--rotate+relative

    方法说明:两个正方形,一个小的,一个大的,将大的正方向进行旋转,然后移动到小的正方形的合适位置,覆盖小正方形的一部分,使小正方形剩余部分为三角形,再把大正方形的背景色改为浏览器窗口的颜色. 用到知识: ...

随机推荐

  1. 4.1、Libgdx的生命周期

    (原文:http://www.libgdx.cn/topic/32/4-1-libgdx%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F) 一个libgdx应 ...

  2. [Redis]处理定时任务的2种思路

    用redis完成类似 at 命令的功能,例如订单24小时后没有支付自动关闭,定时发邮件,主要说下任务生成之后怎么触发消费. 使用 有序集合 思路: 使用sorted Sets的自动排序, key 为任 ...

  3. Ubuntu下编译SHTOOLS

    SHTOOLS是使用Fortran语言写的一个专门用于处理球谐函数的一个开源库,更多的介绍请猛戳这里,关于这个库的安装和使用,都在官网上有详细的说明,虽然很详细,但是编译的时候还是比较费劲,下面将我在 ...

  4. 从驱动层分析android的Binder机制-android学习之旅（83）

    前言及知识准备 Binder驱动程序 Service组件的注册和启动 Clinet应用获取服务 本次主要介绍Android平台下Binder进程间机制.从机制的组成出发,将按照Binder驱动程序.B ...

  5. Android应用---基于NDK的samples例程hello-jni学习NDK开发

    Android应用---基于NDK的samples例程hello-jni学习NDK开发 NDK下载地址:http://developer.android.com/tools/sdk/ndk/index ...

  6. Spring AOP (二)

    下面介绍@AspectJ语法基础 一.切点表达式函数 AspectJ的切点表达式由关键字和操作参数组成,如execution(* greetTo(..)) 的切点表达式,execution为关键字,而 ...

  7. CCT之CAMERA TUNNING调试学习总结

    原创链接:点击打开链接 对于MT6589平台camera调试的学习总结,camera调试学习的是对于raw类sensor的调试,对于yuv格式的sensor是由FAE帮助我们调试的. 首先在调试一个c ...

  8. Lucene 学习资料

    个机制的结合.关于中文的语言分析算法,大家可以在Google查关键词"wordsegment search"能找到更多相关的资料. 安装和使用 下载:http://jakarta. ...

  9. C++容器学习，与结构体排序和set来一场邂逅

    最近学习C++容器,积累一下.下面介绍set和multiset,并使用sort对结构体进行排序.C++之路漫漫其修远兮! 一.对结构体进行排序 // sort_struct.cpp : 定义控制台应用 ...

  10. Mybatis中文查询没有结果

    我用中文参数去查找数据,没有返回结果,应该是乱码问题 进行如下配置问题消失:jdbc:mysql://localhost:3306/appstore_db?useUnicode=true&ch ...