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. 黑马程序员——OC语言 其他语法

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)ARC的判断准则:只要没有强指针指向对象,就会释放对象 1.ARC特 ...

  2. 设计模式之三：单例模式singleton

    单例设计模式确切的说就是一个类只有一个实例,有一个全局的接口来访问这个实例.当第一次载入的时候,它通常使用延时加载的方法创建单一实例. 提示:苹果大量的使用了这种方法.例子:[NSUserDefaul ...

  3. php中json_encode UTF-8中文乱码问题

    最近在接口代码当中用到过json_encode,在网上找到说json_encode编码设置为UTF-8中文就不会乱码,经验证这办法确实是有效果的,但是不知道为什么,代码在用过一段时间之后就不太管用了. ...

  4. 关于async

    以前做项目很少理会async这个属性 今天做项目的时候 由于原来是点击查看按钮进行查看 现在要把需求改成默认进入页面就直接显示内容 我在js加载的时候就需要调用一次查看的点击事件 我在整个js初始加载 ...

  5. UIkit框架之UIDatePicker

    1.继承链:UIcontrol:UIview:UIResponder:NSOobject 2.和uidatepicker相关联的触发事件是 UIControlEventValueChanged,当使用 ...

  6. solr导入数据库数据-tinyint数据转boolean

    solr在导入mysql数据库数据时,遇到一个问题:数据类型为tinyint的数据对应不到solr中的数据类型,因此就需要将tinyint转一下. 修改schema.xml文件,如下: 1.添加boo ...

  7. 图片加载完后执行js

    <script>            window.onload=function(){                          var liwidth = $('.imgul ...

  8. 配置vim环境

    <1> 一般不建议更改/etc/vimrc这个文件,因为此文件更改对所有用户生效, 故一般只更改当前用户 即更改文件 vim ~/.vimrc (.表示隐藏文件) <2> 该文 ...

  9. 《C与指针》第一章练习

    本章例程 程序1.1 重排字符 #include <stdio.h> #include <stdlib.h> #include <string.h> #define ...

  10. CE5 中断

    一.intr.h里面定义硬件中断号 #define IRQ_EINT0 0 #define IRQ_EINT1 1 #define IRQ_EINT2 2 #define IRQ_EINT3 3 #d ...