static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。就无法通过top,left ,bottom,right 定位。(static 为默认值)
  relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。相对于父级的定位！
  absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
   fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
注：
CSS中定位的层叠分级：z-index: auto | namber;

补充：

1.页面标准文档流、浮动层、float属性

1.1 文档流

HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。

1.2 浮动层

浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。

而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。

1.3 float 属性介绍

　　① left ：元素向左浮动。

　　② right ：元素向右浮动。

　　③ none ：默认值。

　　④ inherit ：从父元素继承float属性。

1.4 相邻兄弟元素情况

相邻兄弟元素是否也包含了float属性，会影响布局。

1.5 默认布局图

<!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>2.3-float属性</title>

    <style type="text/css">

        #a

        {

            background-color:Red;

            height:50px;

            width:100px;

        }

        #b

        {

            background-color:Yellow;

            height:50px;

            width:200px;

        }

        #c

        {

            background-color:Blue;

            height:50px;

            width:300px;

         }

         #d

         {

            background-color:Gray;

            height:50px;

            width:400px;

         }

    </style>

</head>

<body>

<div id=a >div-a</div>

<div id=b>div-b</div>

<div id=c>div-c</div>

<input type="text" value="input1"  />

<input type="text" value="input2" />

<input type="text" value="input3 " />

<div id=d>div-d</div>

<input type="text" value="input4 " />

</body>

</html>

2.float:left

说明：元素向左浮动。

2.1 代码变更

input2 添加：float:left

div-b 添加：float:left

div-d 添加：float:left

2.2 变更后视图

　　① 浏览器的宽度“不够长”时

　　　　

　　② 浏览器的宽度"够长"时

　　　　

2.3 结论

当前元素分类(float:left) 下一个紧邻元素分类(不含float) 结论
块级元素(a) 块级元素(b) b会填充a遗留下来的空间，a会和b发生重叠，a的图层在上面。
内联元素(b) b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。
内联元素(a) 块级元素(b) b不会跟随a的移动。
内联元素(b) b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。

3.float:right

说明：元素向右浮动。

3.1 代码变更

input2元素：添加 float:right

input[value="input2"]
{
float:left;
}

div-b 添加：float:right

div-d 添加：float:right

3.2 变更后视图

　　① 浏览器的宽度“不够长”时

　　

　　② 浏览器的宽度"够长"时

　　

3.3 结论

当前元素分类(float:right) 下一个紧邻元素分类(不包含float) 结论
块级元素(a) 块级元素(b) b会填充a遗留下来的空间，若a会和b发生重叠(父容器宽度减少)，a的图层在上面。
内联元素(b) b会填充a遗留下来的空间。
内联元素(a) 块级元素(b) b不会跟随a的移动。
内联元素(b) b会填充a遗留下来的空间。

4. 相邻元素含有float属性

因内联元素的特性，最好别把内联元素与块级元素相邻使用float属性。

下面都以块级元素为例：

默认视图：

4.1 float:left

　　　　给这三个div都添加 float:left

4.1.1 视图

　　　　①浏览器的宽度"足够长"

　　　　

　　　　②浏览器的宽度"不够长"

　　　　

4.1.2 结论

　　　　Ⅰ 相邻的浮动元素，left属性最前面的元素，排在最左面。

　　　　Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。

4.2 float:right

　　　　给这三个div都添加 float:right

4.2.1 视图

　　　　①浏览器的宽度"足够长"

　　　　

　　　　②浏览器的宽度"不够长"

　　　　

4.2.2 结论

　　　　Ⅰ 相邻的浮动元素，right属性最前面的元素，排在最右面。

　　　　Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。

4.3 height高度不等的块级元素

把div-a的height值设为大于div-b，三个div都添加 float:left后：

4.3.1 视图

　　　　①浏览器的宽度"足够长"

　　　　

　　　　②浏览器宽度缩小时

　　　　

　　　　③浏览器宽度进一步缩小时

　　　　

4.3.2 结论

　　　　Ⅰ height不相等的div浮动元素排序时，照拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。

4.3.3 解决浏览器宽度缩小变形

　　　　把添加float的属性的div元素嵌入在一个div中，并给此div添加width和height属性。浏览器宽度缩小时，也不会发生变形。

　　　　可参照 CSS HTML元素布局及Display属性介绍

　　　　

　　

　

 

css-position:absolute, relative 的用法的更多相关文章

  1. jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

  2. 今天我们来谈谈绝对定位和相对定位的区别，和需要注意的问题；position:absolute|relative;

    首先position:absolute|relative; 前者是绝对定位,后者是相对定位: position属性的四个值: static,relative,fixed,absolute; 重点重点重 ...

  3. css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

  4. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  5. CSS position: absolute、relative定位问题详解

    CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...

  6. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  7. css position absolute 浮动特性

    absolute的元素不会占据未浮动的元素的空间<html> <head> <style type="text/css"> .flipbox{ ...

  8. css position absolute相对于父元素的设置方式

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...

  9. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  10. CSS position:absolute浅析

    一.绝对定位的特征 绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCT ...

随机推荐

  1. POJ3252 Round Numbers 题解 数位DP

    题目大意: 求区间 \([x,y]\) 范围内有多少数的二进制表示中的'0'的个数 \(\ge\) '1'的个数. 解题思路: 使用 数位DP 解决这个问题. 我们设状态 f[pos][num0][n ...

  2. Python库的安装（Windows/Linux通用）

    pip安装 最简单的安装方式,自动下载并安装. pip:包管理工具 安装步骤 执行安装命令:pip install <package_name> wheel安装 在网速较差的情况下适用. ...

  3. IDEA错误: 找不到或无法加载主类

    错误: 找不到或无法加载主类 idea本身缓存问题 解决:清理缓存重启IDEA file-->invalidate Cache/restart 之后再重新build.

  4. SCU 4439 Vertex Cover|最小点覆盖

    传送门 Vertex Cover frog has a graph with n vertices v(1),v(2),…,v(n)v(1),v(2),…,v(n) and m edges (v(a1 ...

  5. 【转】小波与小波包、小波包分解与信号重构、小波包能量特征提取 暨 小波包分解后实现按频率大小分布重新排列(Matlab 程序详解）

    转:https://blog.csdn.net/cqfdcw/article/details/84995904 小波与小波包.小波包分解与信号重构.小波包能量特征提取   (Matlab 程序详解) ...

  6. Deferred shading rendering path翻译

    Overview 概述 When using deferred shading, there is no limit on the number of lights that can affect a ...

  7. GeneXus 16 如何实现自动化测试和发布

    CI/CD(持续集成/持续发布)是一种软件开发策略,以使公司能够尽可能快速.高效地给客户发布新功能.为了能够实现CI/CD,就需要通过PipeLine对整个软件过程进行一系列的节点管理,必须将每个阶段 ...

  8. Qt Installer Framework翻译(3-4)

    更新组件 下图说明了用于更新已安装组件的默认工作流程: 本节使用在macOS上运行的Qt 5维护工具为例,来演示用户如何更新已安装组件. 启动更新程序 用户启动维护工具时,将打开"简介&qu ...

  9. kafka(一)-为什么选择kafka

    作为开发人员,我们在选择一个框架或者工具时,我们都需要考虑些什么,我们不是头脑发热,一拍脑袋就它了,我们首先要认清这个框架或工具的作用是什么,能给我们带来什么样的好处,同时也要考虑带来什么样的负面结果 ...

  10. python算法学习总结

    数据结构一维: 基础:数组array(string),链表Linked List 高级:栈stack,队列queue,双端队列deque,集合set,映射map(hash or map), etc二维 ...