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. 工厂方法（factory method）

    动机(Motivation) 在软件系统中,经常面临着“某个对象”的创建工作:由需求的变化,这个对象经常面临着剧烈的变化,但是它却拥有比较稳定的接口.如何应对这种变化?如何提供一种“封装机制”来隔离出 ...

  2. Volley框架的使用

    所谓Volley,它是2013年Google I/O上发布的一款网络框架,基于Android平台,能使网络通信更快,更简单,更健全. 它的优点:(1)默认Android2.3及以上基于HttpURLC ...

  3. ACE - Reactor源码总结整理

    ACE源码约10万行,是c++中非常大的一个网络编程代码库,包含了网络编程的边边角角. ACE代码可以分三个层次:OS层.OO层和框架层: OS层主要是为了兼容各个平台,将网络底层API统一化,这一层 ...

  4. android view : 概述

    关于view的显示和绘制,不会去了解底层,仅仅在framework层做一些概述:以oo的思想,那么窗口的显示,内容的显示一定都有对应的类来相对应.了解了这一点之后,就去抽象一下android为了显示窗 ...

  5. MVC解决方案发布IIS 登录页面需要输入两次帐号问题

    IIS项目在本地VS2013 解决方案中正常登录可以进入.发布IIS时出现需要输入两次帐号密码进入主页面最终发现是web.config文件配置问题 web.config 默认配置 <authen ...

  6. leetcde37. Sudoku Solver

    Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated by th ...

  7. 8UFTP

    FTP  文件上传下载工具    FTP(File Transfer Protocol)是Internet上用来传送文件的协议(文件传输协议). 官网:http://ftp.8u.cn 网盘下载(版本 ...

  8. WOJ-1203

    Description 有一组数,很多很多个数,里面有一个数出现了超过一半次,请你把它找出来 Input 先是一个N (N<=1000000),然后接下来一行N个数,请一直处理到EOF. Out ...

  9. Kaiju: Fast and sensitive taxonomic classification for metagenomics

    Kaiju: Fast and sensitive taxonomic classification for  metagenomics   问题描述:However, nucleotide comp ...

  10. 9.9,新iPhone要来了,是欢呼,还是墙角画圈,一会儿见分晓