关于定位要弄清一个概念,那就是"文档流"

什到是文档流 说得简单一点 就是 自上而下 从左到右

生成顺序

关于html元素又分为两种 块状元素 内联元素

块状元素：单独占一行

内联元素: 撑完了在到下一行

有时候我们需要 相同的div在一行 所以就用到float

但是有时候需要把某个元素 放在特定的元素的位置

但又不影响页面结构 那么我们的定位功能就出现(脱离文档流，就好像悬浮于它上面)

不多说了上个例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Untitled Page</title>

    <style type="text/css">

        #test{

            border:1px solid #ccc;

            width:500px;

            height:2000px;

        }

        #test_1{

            border:1px solid #ccc;

            width:300px;

            height:300px;

            z-index:1000000;

            position:relative;

        }

        #test_1_1{

            border:1px solid #ccc;

            width:100px;

            height:100px;

            cursor: pointer;

            position:fixed;

            left: 100px;

            top:300px;

            z-index:99998;

        }

        /*

            absolute:绝对定位 如果父元素没有定位元素则按body偏移

            如果有则按定位元素来偏移(会脱离文档流)

            relative是相对于自己本身来定位的 他是参照父级的原始点为原始点，无父级则以body的原始点为原始点

            relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了，

            如果被定义成relative的对象被移出了 他原来的位置还在，别的元素就不能替代这个位(不会脱离文档流)

            fixed:固定定位相对视窗(脱离文档流)

        */

    </style>

</head>

<body>

    <div id="test">

        <div id="test_1">

            <div id="test_1_1">

            sgsgsgs

            </div>

        </div>

    </div>

</body>

</html>

关于w3c总结说明图

关于css定位的更多相关文章

  1. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

  2. 常用的CSS定位，XPath定位和JPath定位

    CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...

  3. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  4. CSS 定位

    一.CSS 定位和浮动   它们代替了多年来的表格布局.   定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置.   浮动在 CSS1 中被首次提出.浮动不完全是定位, ...

  5. Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析

    加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

  6. CSS定位小技巧

    CSS定位Static 默认定位Relative 相对定位:left 和topposition: relative;/*相对定位*/ left:40px;/*在原来的位置向右移动*/ top:100p ...

  7. (七)CSS定位(Positioning)

    CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...

  8. CSS定位（CSS定位概述、相对定位、绝对定位、浮动）

    CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...

  9. CSS定位（postion）和移动(float)

    5.定位和移动:Positioning(定位)CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧 ...

  10. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

随机推荐

  1. XML5个转义符

    XML5个转义符:<,>,&,”,©;的转义字符分别如下: < >& " &apos;

  2. SQL SERVER 的排序规则

    有时候查询数据库的时候会发现(比如做重名检查的时候):数据库的查询时对大小写不敏感的,也就是 A 和 a 是一样的. 也就是说 select * from tabletest where name = ...

  3. WCF推送

    http://www.cnblogs.com/server126/archive/2011/08/11/2134942.html

  4. kernel dump Analysis

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/0c418482-7edd-4c91-b7f4-6005d550244a/got-the- ...

  5. Flink源码分析

    http://vinoyang.com/ http://wuchong.me Apache Flink源码解析之stream-source https://yq.aliyun.com/articles ...

  6. 中秋节福利---HTML5-玉兔吃月饼游戏

    中秋节快来了.送大家点福利: HTML5-玉兔吃月饼游戏 效果图: 代码下载:点击这里!!

  7. 在vue-cli生成的项目中使用karma+chrome进行单元测试

    用vue-cli生成项目时,如果选择了单元测试,那么会采用karma+mocha作为单元测试框架,默认使用的浏览器是PhantomJs. Karma 是一个基于Node.js的JavaScript测试 ...

  8. 每日英语：Three Shows That Changed The Way Networks Think About Viewership

    As we continue examining this season’s DVR success stories in The Blacklist and Sleepy Hollow it mak ...

  9. (原）ubuntu下cadvisor+influxdb+grafana+supervisord监控主机和docker的containers

    ubuntu下cadvisor+influxdb+grafana+supervisord监控主机和docker的containers(运行在主机上) 适用于类ubuntu系统.amd64. 1. in ...

  10. Window 分布式学习－好文收藏

    概述 最近.NET的世界开始闹腾了,微软官方终于加入到了对.NET跨平台的支持,并且在不久的将来,我们在VS里面写的代码可能就可以通过Mono直接在Linux和Mac上运行.那么大家(开发者和企业)为 ...