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. HDU2222

    http://acm.hdu.edu.cn/showproblem.php?pid=2222 注意: 1. keyword可以相同,因此计算时要累计:cur->num++. 2. 同一个keyw ...

  2. tornado autoreload 模式

    在用tornado进行 网络程序编写的时候,肯定要对代码进行修修改改,如果每次都要重启server的话,会是很麻烦的事情.tornado提供了autoreload模式. 一,要开始autoreload ...

  3. dij单源最短路纯模板

    #include <iostream> #include <cstdio> #include <cstdlib> #include <algorithm> ...

  4. ASP.Net Session, Cookie, Cache的区别

    Session—管理用户会话状态 什么是状态管理? 指对同一页或不同页的多个请求维护状态和页信息的过程 为什么要进行状态管理? Web页是无状态的,不保存任何用户请求信息,而且到服务器的每一往返过程都 ...

  5. (实用篇)PHP递归实现无限级分类

    在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性.那么PHP是如何实现无限级分类的呢?我们在本文中使用递归算法并结合mysql数据表实现无限级分类. 在一些复杂的系统中,要求对信 ...

  6. lsof 解决无法删除文件夹问题

    今天在HPCC上面想要删除一个文件夹,结果说“Device or  resource busy". 于是google一下,发现这个是因为有程序正在运行,所以无法删除. 那么怎样解决? lso ...

  7. REST概念和应用 - TODO

    Motivation Sometimes I fell like giving up, then I remember I have a lot of motherfuckers to prove w ...

  8. GCC中文手册

    GCC 1 NAME gcc,g++-GNU工程的C和C++编译器(egcs-1.1.2) 总览(SYNOPSIS) gcc[option|filename ]... g++[option|filen ...

  9. 黑马程序员——JAVA基础之正则表达式,网络爬虫

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 正则表达式: 概念:用于操作字符串的符合一定规则的表达式 特点:用于一些特定的符号来表示一些代码 ...

  10. mysql主从复制问题之主从两端binlog日志不同步解决方案

    主操作: 进入主的数据库查看状态: mysql> show master statusG; *************************** 1. row **************** ...