[HTML/CSS]说说position
目录
语法
position : static absolute relative（static、absolute、relative常用值）。
参数
static :无特殊定位，对象遵循HTML定位规则。
absolute :将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框。
relative :对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
作用
绝对定位position用于定位盒子（例如div，span等）对象，有时一个布局中几个小对象，不易用css padding、css margin进行相对定位，这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局，这个时候我们使用position绝对定位非常方便布局对象。
注意
绝对定位与float浮动不能同时使用，比如一个大盒子里有的是绝对定位，有的是使用css float浮动定位，这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位，注意不要混用。
使用定位的条件
position:absolute；position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。
小案例
css样式：
/*定义，通常最好再定义CSS宽度和CSS高度*/
.divParent{position:relative;width:400px;border:2px dotted red;height:300px;}
/*这里定义了距离父级左侧距离间距为10px，距离父级上边距离为10px*/
.divChildLeftTop{position:absolute;left:10px;top:10px;width:100px;height:100px;border:2px dotted blue;}
/*或*/
/*这里定义了距离父级靠右距离10px,距离父级靠下边距离为10px*/
.divChildRightBottom{position:absolute;right:10px;bottom:10px;width:100px;height:100px;border:2px dotted black;}
html代码：
<div class="divParent">
<div class="divChildLeftTop"></div>
<div class="divChildRightBottom"></div>
</div>
结果：
注意，left（左）和right（右）在一个对象只能选一种定义，bottom（下）和top（上）也是在一个对象只能选一种定义。其实也容易理解，如果某天作为屌丝的你，被两个女的一左一右拉着，你是不是也很为难？
总结
使用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代码臃肿，更加经验适当使用，用于该使用地方。
参考
http://www.divcss5.com/rumen/r403.shtml
[HTML/CSS]说说position的更多相关文章
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- 十步图解CSS的position
CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS的position(位置)
position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...
- CSS的position设置
CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...
- 关于CSS 的position定位问题
对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- css的position中absolute和fixed的区别
fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...
随机推荐
- 网站服务器压力Web性能测试（4）:服务器压力Web性能测试小结
1.Apache Bench,Webbench,http_load对网站压力Web性能进行测试时,为了得到更加客观和准确的数值,应该从远程访问.局域网访问和本地等多个方面进行全方位的测试.一般用127 ...
- MYSQL5.5源码安装 linux下
/* 首先安装必要的库 */ yum -y install gcc* ###### 安装 MYSQL ###### 首先安装camke 一.支持YUM,则 yum install -y cmake 二 ...
- JS页面之间传值
父页面与子页面之间有多种传值的方式: 第一种,通过window.open的方法打开一个新的页面,在新的页面里面通过window.opener来获取对象,以下为实例 父页面: function open ...
- vue 计算属性 实例选项 生命周期
vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...
- MYSQL 索引无效和索引有效的详细介绍
1.WHERE字句的查询条件里有不等于号(WHERE column!=...),MYSQL将无法使用索引 2.类似地,如果WHERE字句的查询条件里使用了函数(如:WHERE DAY(column)= ...
- Python Flask 配置文件
1. 什么是配置文件? 就是当程序调用的一些参数,文件路径,方法或者类放到一个文件中, 当下次需要修改的一个参数的时候,不用再从所有关联的程序中找到该参数挨个修改, 比较繁琐.像Django中,程序启 ...
- 利用ncurses库开发终端工具箱（1）—— ToDoList小工具开发
准备工作 腾讯云服务器(Ubuntu),C++编程语言 由于想输出界面中包含中文,所以安装库 libncursesw5,依次输入下面三行命令 sudo apt-get install libncurs ...
- 微信小程序radio组件 - 如何改变默认样式大小？
今天在写小程序的时候用到radio组件,但是很懊恼并未提供修改radio组件大小属性,第一感觉准备用css width , height 改变radio的大小,但是怎么搞也无法改变. 但是又不愿意搞个 ...
- Java学习笔记（十三）——通过Netbeans开发环境生成oracle数据库中表的对应hibernate映射文件
[前面的话] 身体慢慢已经快好了,感觉真好,哈哈. 这篇文章要通过Hibernate对数据库进行操作,而Netbeans可以直接通过数据库逆向生成对应的映射文件.基础文章,选择性阅读. [步骤] 1. ...
- 【JBPM4】EL表达式的使用，实现JAVA与JPDL的交互
user.java实体类 private String kezhang; private String zhuren; /...完善set get 方法.../ 创建流程实例 //创建流程引擎 Pro ...