怕忘记了CSS中position的absolute和relative用法
CSS2.0中的定位确实有时会把人弄糊涂，所以今天给它记下来，同时供以后查阅。下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站，在此处特别的说明一下
CSS2.0中position主要用于HTML元素的定位，在实际设计中还是非常有用的。但是对于学习者来说都会遇到相对定位和绝对定位到底如何使用，非常打脑壳
不管再咋个打脑壳，大家首要的还是记住position的几个属性值
- static: HTML元素的默认定位方式
- absolute: 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
- relative: 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
- fixed: 元素的位置相对于浏览器窗口是固定位置, 即使窗口是滚动的它也不会移动
因为static和fixed比较简单，所以下面的案例我们来介绍一个relative和absolute这个两个属性。先看一个案例截图
上面截图由3个div组成，外层div名称为scroll，第2个div的名称为sub，第3个div的名称为ssub。现在我就来告诉大家如何使用position中absolute和relative
记住如下的口诀
- 绝对定位（absolute）位置是相对最近已经定位的父元素，如果父元素本身没有使用position定位，则相对于文档（html）定位
- 绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位
案例代码
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll /*父级元素,注意使用了relative*/
{
background-color:#00FFFF;
width:350px;
height:350px;
position: relative;
}
div.sub { /*第2个子级元素*/
width:200px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 10px;
top: 10px;
}
div.ssub{ /*最里层的元素*/
width:100px;
height: 100px;
border: 1px solid red;
position: absolute;
left: 10px;
top: 10px;
}
</style>
</head> <body>
<div class="scroll">
<div class="sub">
<div class="ssub"></div>
</div>
</div>
</body>
</html>
CSS定位总结（来自divcss5官方网站的总结，本人觉得非常好，就记下来）。多谢divccs5，http://www.divcss5.com/rumen/r403.shtml
通常我们使用position:absolute；position:relative进行绝对定位布局，通过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿
在绝对定位时候我们可以使用css z-index定义css层重叠顺序。同时left、right、bottom、top的数值，可以使用（Photoshop）PS切片工具获取准确的数值。
怕忘记了CSS中position的absolute和relative用法的更多相关文章
- CSS中position的absolute和relative用法
static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过z-index属性定义.绝对定位的元 ...
- css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...
- 【转】CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
随机推荐
- .NET Reactor使用教程（加密源代码示例）
更多:https://www.cnblogs.com/PiaoMiaoGongZi/category/1120300.html 1.打开 Eziriz .NET Reactor,主界面如图1所示: 图 ...
- JavaEE高级-Hibernate学习笔记
*什么是Hibernate? > 一个框架 > 一个Java领域的持久层框架 > 一个ORM框架 *对象的持久化 > 狭义的理解:“持久化”仅仅指把对象永久保存到数据库中 &g ...
- Sql Server 压缩数据库占用空间
1.删除数据库库中不必要的数据2. 在数据库上右击,任务,收缩,文件,在收缩操作上选择在未使用的空间前重新组织页,将文件收缩到的最后一行为最小为XXM,在前面的输入框中填入该值,然后点击确定3.分离该 ...
- React / Vue 跨端渲染原理与实现探讨
跨端渲染是渲染层并不局限在浏览器 DOM 和移动端的原生 UI 控件,连静态文件乃至虚拟现实等环境,都可以是你的渲染层.这并不只是个美好的愿景,在今天,除了 React 社区到 .docx / .pd ...
- @ResponseBody和@RestController
Spring 关于ResponseBody注解的作用 responseBody一般是作用在方法上的,加上该注解表示该方法的返回结果直接写到Http response Body中,常用在ajax异步请求 ...
- [java] [error] java.lang.OutOfMemoryError: unable to create new native thread
前言 最近公司的服务器出现了oom的报错,经过一番排查,终于找到了原因.写下这篇博客是为了记录下查找的过程,也是为了帮助那些跟我门遇到的情况相同的人可以更快的寻找到答案. 环境 系统:linux(ce ...
- java并发编程如何预防死锁
在java并发编程领域已经有技术大咖总结出了发生死锁的条件,只有四个条件都发生时才会出现死锁: 1.互斥,共享资源X和Y只能被一个线程占用 2.占有且等待,线程T1已经取得共享资源X,在等待共享资源Y ...
- 区间查询异或最大值——cf1100F,hdu6579（线性基）
hdu6579 题意初始时有n个数,现在有q次操作: 查询[l,r]内选择一些数使得异或和最大:在末尾加入一个数.题目强制在线. 思路对于i我们记录[1,i]每个基底最靠近i的位置和这个位置的值,然后 ...
- MySql使用mysqldump 导入与导出方法总结
导出数据库数据:首先打开cmd进入MySQL的bin文件夹下 1.导出education数据库里面的users表的表数据和表结构(下面以users表为例) mysqldump -u[用户名] -h[i ...
- ElasticSearch2.2.0安装
一.ElasticSearch2.2.0安装 1.下载ElasticSearch2.2.0安装包 https://download.elastic.co/elasticsearch/elasticse ...