1.元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间, 绝对定位：position:absolute, 被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除.

2.父容器使用相对定位，子元素使用绝对定位后，这样的位置不再于浏览器左上角，而是相对于父容器左上角

3.相对定位和绝对定位需要top，right，bottom。Left使用来定制具体位置，这四个属性只有在该元素使用定位后才会生效，其他情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下。或及时使用左，又使用右。

4.使用相对定位和绝对定位后，当频幕放大缩小，视图的位置也不会乱跑

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>布局</title>

     <style type="text/css">

        .main{

            width: 100%;

            height: 800px;

            margin:  auto;

        }

        .a{

            width: 20%;

            height: 50%;

            background-color: red;

            position: relative;

        }

        .b{

         margin-top: -400px;

            width: 50%;

            height: 80px;

        margin-left: 20%;

            background-color: green;

        }

        .c{

            width: 50%;

            height: 320px;

            margin-left: 20%;

            top: 80px;

            background-color: yellow;

        }

        .d{

            margin-top: -400px;

            margin-left: 60%;

            width: 20%;

            height: 400px;

            background-color:  blue;

            position: relative;

        }

        .g{

            height: 90%;

            background-color: cyan;

        }

        .h{

          position: absolute;

          top: 20%;

            height: 80%;

            width: 100%;

            background-color: orange;

        }

        .f{

            position: absolute;

            top: 20%;

            width: 100%;

            height: 70%;

            background-color: purple;

        }

     </style>

 </head>

 <body>

   <div class="main">

       <div class="a">a

     <div class="f">列表</div>

       </div>

       <div class="b">b 图片</div>

       <div class="c">c

      <div class="g">g</div>

       </div>

       <div class="d">d

      <div class="h">h</div>

       </div>

   </div>

 </body>

 </html>

CSS的相对定位和就对定位的更多相关文章

  1. 关于网页设计的css+html相对定位和决定定位的理解

    css中有很多定位,其中最重要的是相对定位和绝对定位: 定位很重要,不搞好,网页就会很乱,显示的完全不是自己想要的效果,自己必须掌握: 首先说一个重要的结论:绝对定位,是不占位置的,总是相对离自己最近 ...

  2. 详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  3. CSS：盒模型和position定位

    盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分 ...

  4. Web—12-详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  5. css中的三种基本定位机制

    css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...

  6. Html CSS学习（五）position定位 原

    Html CSS学习(五)position定位 position用来对元素进行定位,其值有以下几种: static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会 ...

  7. 详解CSS的相对定位和绝对定位（讲得很详细）

    详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...

  8. HTML&CSS基础-相对定位

    HTML&CSS基础-相对定位 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> &l ...

  9. CSS系列：CSS中盒子的浮动与定位

    1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...

随机推荐

  1. Android Studio项目目录结构

    在Android Studio中,提供了以下几种项目结构类型 我们一般常用的有以下两种结构: Project 结构类型 app/build/ app模块build编译输出的目录 app/build.g ...

  2. 由于@@ServerName等问题对SQL增量升级脚本进行补充

    由于@@ServerName在安装数据库之后修改了机器名的情况下,获取到的内容仍然是原来的机器名,造成数据库连接失败, 所以不能直接使用该全局变量. 此外对升级脚本的执行方式做了一下调整,将版本的判断 ...

  3. iOS 模拟器上录制Demo视频

    在App审核中会让用户上传一段简易的视频,那么如何制作改视频呢? 今天无意中在Cocochina 中看到 说利用QuickTime来制作,而QuickTime是操作系统自带的. 哦 My,God ! ...

  4. jQuery 实现菜单

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Hbase中的BloomFilter（布隆过滤器）

    (1)     Bloomfilter在hbase中的作用 Hbase利用bloomfilter来提高随机读(get)的性能,对于顺序读(scan)而言,设置Bloomfilter是没有作用的(0.9 ...

  6. JMeter学习（十）内存溢出解决方法

    使用jmeter进行压力测试时遇到一段时间后报内存溢出outfmenmory错误,导致jmeter卡死了,先尝试在jmeter.bat中增加了JVM_ARGS="-Xmx2048m -Xms ...

  7. 在 Xcode 6 中使用矢量图( iPhone 6 置配 UI)

    在 Xcode 6 中使用矢量图( iPhone 6 置配 UI) (本文转载:http://iosdeveloper.diandian.com/post/2014-09-25/40063062789 ...

  8. 跟大牛之间关于hibernate的一些探讨记录

    hibernate的工作原理!! 1.读取配置文件 2.读取并解析映射信息,创建SessionFactory 3.打开Session 4.创建事务Transcation 5.持久化操作 6.提交事务 ...

  9. YMMI001-采购单审批

    ************************************************************************ Report : YMMI1 ** Applicati ...

  10. php开发工具。。

    看了好多决定用phpstorm. hahaha PHP还是挺好玩的 但是貌似犯蠢一下,MAC自带有php环境: 我还下了一个XAMPP,不过无所谓啦. 都可以用