css布局模型之绝对定位与相对定位
1. 绝对定位，absolute
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
2. 相对定位，relative
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
什么叫做“偏移前的位置保留不动”呢？
大家可以做一个实验，在div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：
<body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
效果图：
从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。
3. Relative与Absolute组合使用
小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
总结：使用绝对定位，可以实现横向多列布局及较为复杂的定位，比如带有遮罩层效果的提示框、固定层效果、全屏广告等。
position：
css布局模型之绝对定位与相对定位的更多相关文章
- 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- [Web 前端] CSS 盒子模型，绝对定位和相对定位
cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- 浅析css布局模型1
css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
- 从零开始学习前端开发 — 6、CSS布局模型
一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...
- CSS布局模型学习
转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习 参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...
- CSS 布局模型
css布局模型 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上.又不同于我们常说的 CSS 布局样式或 CSS 布局模板.假设说布局模型是本.那么 CSS ...
- 前端之CSS布局模型
一.css布局模型: 流动模型(Flow) 浮动模型(Float) 层模型(Layer) 1.流动模型: 页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型: ...
随机推荐
- 【原】Redis分区
Redis高级篇 分区 为什么分区? Redis中的分区主要有两个目的: 允许用多台机器的内存存放更大的数据集.如果没有分区,那么你只能存放单台机器内存的最大值的数据集. 允许用多核和多台机器提高计算 ...
- STM32硬件调试详解
STM32的基本系统主要涉及下面几个部分: 一.电源 1).无论是否使用模拟部分和AD部分,MCU外围出去VCC和GND,VDDA.VSSA.Vref(如果封装有该引脚)都必需要连接,不可悬空: 2) ...
- 如何使用Keil仿真环境查看CPU类型字长？【worldsing笔记】
笔者上次写了如何用IAR查CPU的字长和数据类长度的方法:点击这里查看 今天试着在Keil MDK 5.0 里查看CPU的字长和数据类长度,打开一个已有的工程,编译并进入Debug,如图1.1所示: ...
- android系统自带图标集合（android.R.drawable查看）
alert_dark_frame alert_light_frame arrow_down_float arrow_up_float bottom_bar btn_default btn_defaul ...
- js Uncaught SyntaxError: Unexpected token错误
今天遇到js报错Uncaught SyntaxError: Unexpected token 不知道是什么原因,并且js还会继续往下执行. 经过排查竟然是在保存行的上面有个if少一个大括号,真是坑爹啊 ...
- zoj 3823 Excavator Contest 构造
Excavator Contest Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/show ...
- 将图片序列保存为GIF文件
http://stackoverflow.com/questions/11459568/issue-with-rebuilding-and-saving-gifs-using-tgifimage 将图 ...
- Android多媒体-人脸识别
1. 相关背景 Google 于2006年8月收购Neven Vision 公司 (该公司拥有 10 多项应用于移动设备领域的图像识别的专利),以此获得了图像识别的技术,并不是常快应用到免费的 Pic ...
- 基于新浪sae使用php生成图片发布图文微博
1.生成图片的代码: <?php header ("Content-type: image/png"); mb_internal_encoding("UTF-8&q ...
- eclipse代码提示框背景色改动
因为个人习惯,喜欢把eclipse的文本编辑框背景调成全黑色,可是代码提示框的默认背景色也是黑色.所以两者就冲突了.导致看不到代码提示框的内容. 后来发现代码提示框的背景色能够改动.改动内容例如以下: ...