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. highlight.js代码风格引入方法

    <link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/darcula.min.css" rel=&q ...

  2. POJ2411 Mondriaan's Dream 题解 轮廓线DP

    题目链接:http://poj.org/problem?id=2411 题目大意 给你一个 \(n \times m (1 \le n,m \le 11)\) 的矩阵,你需要用若干 \(1 \time ...

  3. 「USACO11NOV」牛的障碍Cow Steeplechase 解题报告

    题面 横的,竖的线短段,求最多能取几条没有相交的线段? 思路 学过网络流的童鞋在哪里? 是时候重整网络流雄风了! 好吧,废话不多说 这是一道最小割的题目 怎么想呢? 要取最多,那反过来不就是不能取的要 ...

  4. 02_css3.0 前端长度单位 px em rem vm vh vm pc pt in 你真的懂了吗？

    1:废话不多说,直接看如下图表: 2:px就不过多介绍了,就是像素点的大小,加入您的屏幕分辨率为1920,则每一个相当于每一个有横着的1920个像素点: 3:em 为相对单位,一般以 body 内的 ...

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

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

  6. (二)Angular+spring-security-cas前后端分离（基于ticket代码实现

    一.前端实现 1.1.路由守卫(用于拦截路由认证) import { Injectable, Inject } from "@angular/core"; import { Can ...

  7. Netty--【详解】

    Netty概述:1.netty是基于Java NIO的网络应用框架,client-server框架2.Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一 ...

  8. Java字符串（String类）

    定义方法: 1.String demo = "test"; 2.String demo = new String(); 3.String demo = new String(&qu ...

  9. 20.java-JDBC连接mysql数据库详解

    1.JDBC介绍 jdbc(java database connectivity)为java开发者使用数据库提供了统一的编程接口,它由一组java类和接口组成. JDBC需要用到的类和接口有: Dri ...

  10. Some collections were archived because you’ve reached the shared requests limits.错误解决

    今天打开我的postman 发现我的一个collection不见了,左下角出现一个提示, Some collections were archived because you’ve reached t ...