css-position:absolute, relative 的用法
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-position:absolute, relative 的用法的更多相关文章
- jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...
- 今天我们来谈谈绝对定位和相对定位的区别，和需要注意的问题；position:absolute|relative;
首先position:absolute|relative; 前者是绝对定位,后者是相对定位: position属性的四个值: static,relative,fixed,absolute; 重点重点重 ...
- css position: absolute、relative详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...
- CSS绝对定位和相对定位 position: absolute/relative
absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...
- CSS position: absolute、relative定位问题详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- css position absolute 浮动特性
absolute的元素不会占据未浮动的元素的空间<html> <head> <style type="text/css"> .flipbox{ ...
- css position absolute相对于父元素的设置方式
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...
- position:absolute/relative/fixed小结
1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...
- CSS position:absolute浅析
一.绝对定位的特征 绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCT ...
随机推荐
- 2018铁人三项测评题 IOS99
下面这一部分是我从网上复制过来的, 2.IOS 解题链接:http://ctf4.shiyanbar.com/web/IOS/index.php 这题页面中提示系统升级到了IOS99,我们可以想到修改 ...
- 【Java基础总结】泛型
泛型实现了参数化类型的概念,使代码可以应用于多种类型. 1. 泛型类 声明的泛型类型静态方法不能使用 class Tools<T>{ private T t; public void se ...
- 原生javascript 基础动画原理
一.实现原理: 1.开定时器前先清除定时器 2.设置定时器 3.当前元素的位置 + 每一步的长度 4.当元素当前位置超过目标点时,把当前位置==目标点 5.设置元素位置,开始运动 6.判断当前位置如果 ...
- .Net Core Web Api实践（三）.net core+Redis+docker实现Session共享
前言:上篇文章介绍了.net core+Redis+IIS+nginx实现Session共享,本来打算直接说明后续填坑过程,但毕竟好多坑是用docker部署后出现的,原计划简单提一下.net core ...
- SliverAppBar 介绍及使用
SliverAppBar控件可以实现页面头部区域展开.折叠的效果,类似于Android中的CollapsingToolbarLayout.先看下SliverAppBar实现的效果,效果图如下: Sli ...
- 使用zipwithindex 算子给dataframe增加自增列 row_number函数实现自增，udf函数实现自增
DataFrame df = ...StructType schema = df.schema().add(DataTypes.createStructField("id", Da ...
- 菜鸟学习Fabric源码学习 — kafka共识机制
Fabric 1.4源码分析 kafka共识机制 本文档主要介绍kafka共识机制流程.在查看文档之前可以先阅览raft共识流程以及orderer服务启动流程. 1. kafka 简介 Kafka是最 ...
- Gitlab应用——系统管理
查看linux系统信息 查看日志 创建账号 选择regular,这是一个普通账号,点击“create user”账号创建完成 点击“User”,然后点击“New user”.使 ...
- 利用 sklearn 生成交叉特征：
------------------------------------- ------------------------------------- ------------------------ ...
- 关于neo4j初入门（5）
neo4j和Java Neo4j提供JAVA API以编程方式执行所有数据库操作. 它支持两种类型的API: Neo4j的原生的Java API Neo4j Cypher Java API Neo4j ...