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

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

生成顺序

关于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. Xtrabackup备份、还原、恢复Mysql操作大全

    环境:CentOS 6.7  + Mysql 5.7.19 + Xtraback 2.4.8 innobackupex常用参数: --user=USER 指定备份用户,不指定的话为当前系统用户 --p ...

  2. activiti主要API对象

    ProcessEngine         //流程引擎 RuntimeService      //与流程实例,执行对象(正在执行) TaskService           //正在执行任务 H ...

  3. 高效开发iOS系列 -- 那些不为人知的KVC

    我的简书地址:http://www.jianshu.com/p/a6a0abac1c4a valueForKeyPath 本篇来解说一下那些不为人知,也常常被忽略掉,而且非常有用的KVC干货小技巧 获 ...

  4. 论Java的ArrayList.add(e)和C++的vector.push_back(e)的区别

    Java的ArrayList和C++的vector很类似,都是很基本的线性数据结构.但是他们的表现却不同. 在工作中碰到一个问题就是,搞不清楚到底传进去的是一个新对象,还是当前对象的引用! 经过实战分 ...

  5. 启动 angular-phonecat 项目时出现这玩意 。('The header content contains invalid characters');

    最近学习angular, 跟着视频做一个动作,启动 “ angular-phonecat ” 这个项目 敲入 “npm start ” 启动没有问题,但是 "http://localhost ...

  6. MSSQL分组取后每一组的最新一条记录

    数据库中二张表,用户表和奖金记录表,奖金记录表中一个用户有多条信息,有一个生效时间,现在要查询: 奖金生效时间在三天前,每个用户取最新一条奖金记录,且用户末锁定 以前用的方法是直接写在C#代码中的: ...

  7. apache做转发

    一台WIN服务器,上面主要装了WAMP程序来运行PHP 的相关东西,现在在机子里的IIS建立了一个ASP.NET站点,访问端口88,服务器上可以:http://127.0.0.1:88来访问.NET网 ...

  8. 【Unity】6.7 向量和Vector3类

    分类:Unity.C#.VS2015 创建日期:2016-04-20 一.简介 在虚拟的游戏世界中,与3D有关的数学知识决定了游戏引擎如何计算和模拟出开发者以及玩家看到的每一帧画面.学习或者回想一下基 ...

  9. （转）Unity3d使用心得（2）：Unity3d 动态下载动画资源——AnimationClip 的使用 - 斯玛特琦

    引言: 在使用 Unity3d 开发微端.或者网页游戏的时候常常须要将资源打包成 AssetBundle ,然后通过 www 的方式动态的下载资源.今天要分享的是我再动态下载 Animation 骨骼 ...

  10. org.apache.flink.runtime.entrypoint.StandaloneSessionClusterEntrypoint

    org.apache.flink.runtime.entrypoint.StandaloneSessionClusterEntrypoint-Xms2024m -Xmx2024m -Dlog.file ...