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. 利用反射将Datatable、SqlDataReader转换成List模型

    1. DataTable转IList public class DataTableToList<T>whereT :new() { ///<summary> ///利用反射将D ...

  2. MySQL表类型和存储引擎版本不一致解决方法

    使用的是老版本的mysql客户端Navicate 8 ,mysql 服务端用的是mysql5.6的版本,在修改版本引擎的时候出现版本不对; mysql error ‘TYPE=MyISAM’ 解决办法 ...

  3. 黑马程序员——【Java基础】——泛型、Utilities工具类、其他对象API

    ---------- android培训.java培训.期待与您交流! ---------- 一.泛型 (一)泛型概述 1.泛型:JDK1.5版本以后出现的新特性,用于解决安全问题,是一个类型安全机制 ...

  4. Javascript 事件对象（二）event事件

    Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  5. (基础篇)echo、print、print_r、printf、sprintf、var_dump的区别比较

    一.echo echo() 实际上不是一个函数,是php语句,因此您无需对其使用括号.不过,如果您希望向 echo() 传递一个以上的参数,那么使用括号会发生解析错误.而且echo是返回void的,并 ...

  6. Nagios NSclient Failed to get CPU value: \238(_total)\6: Failed to get mutex :(

    一台Windows Server 2012的nsclient出现以下的错误,表示无法获得CPU信息 2016-08-08 10:31:33: e:..\..\..\..\trunk\modules\C ...

  7. Bean的定义及作用域的注解实现

    1. Classpath扫描与组件管理 从Spring3.0开始,Spring JavaConfig项目提供了很多特性,包括使用java而不是XML定义bean. 比如@configuration, ...

  8. POJ-3261 Milk Patterns（后缀数组）

    题目大意:找出至少出现K次的子串的最长长度. 题目分析:二分枚举长度x,判断有没有最长公共前缀不小于x的并且连续出现了至少k次的有序子串区间. 代码如下: # include<iostream& ...

  9. 体验一下cygwin

    一直在windows下使用gvim,为了更方便的使用cscope.先是写了bat脚本,发现太不方便了. 于是想到了cygwin.下载安装工具就可以了进行默认安装了,配置比较简单. 调整包: ./set ...

  10. 关于 MAXScript 中文路径返回上级目录(精简版)

    之前写过一个 关于 MAXScript 中文路径返回上级目录 的博文 今天无意中发现了一个更简单的方法 代码如下: fn newfile filepath = ( nf = getfilenamepa ...