目录

语法

作用

使用定位的条件

总结

语法

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的更多相关文章

  1. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  2. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  3. 十步图解CSS的position

    CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...

  4. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. CSS的position(位置)

    position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...

  7. CSS的position设置

    CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...

  8. 关于CSS 的position定位问题

    对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...

  9. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  10. css的position中absolute和fixed的区别

    fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...

随机推荐

  1. python基础===codecs打开文件，解决文件编码格式的问题

    codecs https://docs.python.org/3/library/codecs.html 我们经常用open打开文件的时候会出现各式各样的错误,编码格式的问题,等等~真的很烦 现在尽量 ...

  2. SPOJ Two Paths

    Description 给定一个无向图,含有一定的路.从中找出两个最长的路径(每条路径有一些相通路组成)这两个路径不能经过公共的点,求何时二路径的乘积最大. 本题给出的无向图是一棵树,每边权值为1. ...

  3. 23：django 信号（signal）

    django包含了一个“信号分配器”使得当一些动作在框架的其他地方发生的时候,解耦的应用可以得到提醒.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者,这是特别有用的设计因为有些 ...

  4. 51Nod 1022 石子归并 V2（区间DP+四边形优化）

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1022 题目大意: N堆石子摆成一个环.现要将石子有次序地合并成 ...

  5. LeetCode解题报告—— Container With Most Water & 3Sum Closest & Letter Combinations of a Phone Number

    1.  Container With Most Water Given n non-negative integers a1, a2, ..., an, where each represents a ...

  6. 《逐梦旅程 WINDOWS游戏编程之从零开始》笔记8——载入三维模型&Alpha混合技术&深度测试与Z缓存

    第17章 三维游戏模型的载入 主要是如何从3ds max中导出.X文件,以及如何从X文件加载三维模型到DirextX游戏程序里.因为复杂的3D物体,要用代码去实现,那太反人类了,所以我们需要一些建模软 ...

  7. %和format的区别

    在python中字符串的格式化分为两种:%和format.那么我们在什么时候来使用它们呢?它们有什么区别呢? 举个例子:我们根据一个坐标来表示一个动作 #定义一个坐标 point = (250,250 ...

  8. 二：Storm的配置项说明

    配置项 配置说明 storm.zookeeper.servers ZooKeeper服务器列表 storm.zookeeper.port ZooKeeper连接端口 storm.local.dir s ...

  9. poj 3404&&poj1700(贪心)

    Bridge over a rough river Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4143   Accept ...

  10. 走进 Akka.NET

    官方文档:https://getakka.net/index.html 官网:https://petabridge.com/ 一.Akka.NET 是什么? Akka 是一个构建高并发.分布式和弹性消 ...