CSS定位属性:position。

  定位的基本思想:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素或浏览器窗口本身的位置。

  position属性值:static、relative、absolute、fixed。

  以下所有测试在Firefox40.0下进行。

  所用到基本代码:

  

 <style>
body{
margin: 30px 0 0 30px;
padding:;
}
.div1{
width: 200px;
height: 200px;
padding: 50px;
background: red;
}
.div2{
width: 50px;
height: 50px;
background-color: blue;
}
.div3{
background-color: pink;
width: 80px;
height: 50px;
}
.div4{
background-color: gray;
width: 80px;
height: 50px;
}
</style>

  

 <body>
<div class="div1"><div class="div2">div2</div>div1</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</body>

  

  普通定位:static,默认情况。不设置position属性时,会按照正常的文档流进行排列。

  固定定位:fixed,绝对定位的第二种情况(见下文)。

  相对定位:relative,元素框偏移某个距离(相对于它原来的位置),它原本的位置空间仍然保留。

 .div3{
background-color: pink;
width: 80px;
height: 50px;
position: relative;
left: 300px;
}

  

  DIV3向左偏移了300px,原来的位置还在(DIV4并没有贴上去)。

  在元素有父元素的情况下,也是一样的。

  

 .div2{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 250px;
}

  绝对定位:元素框在正常文档流中所占据空间关闭,并相对于其包含框定位。包含框可能是文档中的另一个元素框或者是窗口本身。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

  分两中情况:

  1. 父元素/祖先元素定位方式为relative或absolute,则相对于此父元素/祖先元素定位,定位起点为父元素/祖先元素的左上角。请注意:如果父元素/祖先元素设置了padding,则从内边距左上角开始定位。
  2. 父元素/祖先元素都没有相对或绝对定位,则相对于浏览器窗口定位(相对于窗口的左上角,不考虑body的内外边距)。

  第一种情况:

  

.div1{
position: relative;
width: 200px;
height: 200px;
padding: 50px;
background: red;
}
.div2{
position: absolute;
left: 300px;
top:;
width: 50px;
height: 50px;
background-color: blue;
}

  

  从上图明显看到,DIV2向左偏移300px,是从内边距左上角开始的,而不是DIV2原始的位置(如果padding为0,则是从原始的位置)。

  设置DIV1的外边距为30px,DIV2偏移left、top都为0。

 .div1{
position: relative;
margin: 30px;
width: 200px;
height: 200px;
padding: 50px;
background: red;
}
.div2{
position: absolute;
left:;
top:;
width: 50px;
height: 50px;
background-color: blue;
}

  

  可见,在父元素框有外边距的情况下,偏移也是从内边距开始的。

  第二种情况:

  body内边距增加30px,DIV2向右偏移360px。

body{
margin: 30px 0 0 30px;
padding: 30px;
}
.div1{
width: 200px;
height: 200px;
padding: 50px;
background: red;
}
.div2{
position: absolute;
left: 360px;
top: 60px;
width: 50px;
height: 50px;
background-color: blue;
}

  

  左边body空白处有外边距、内边距各30px,DIV2偏移30px+30px+300px=360px,刚好与DIV1对齐。证明偏移是从窗口的左上角,而不用管内外边距!

CSS相对定位、绝对定位的更多相关文章

  1. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  2. 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位

    相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...

  3. CSS 相对定位 绝对定位

    css中的相对定位和绝对定位. 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将 ...

  4. CSS相对定位|绝对定位(五)之z-index篇——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1855 补充于2016 ...

  5. [css] CSS相对定位|绝对定位

    第一篇链接:http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A% ...

  6. HTML 学习笔记 CSS样式(相对定位 绝对定位)

    CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...

  7. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  8. Day042---浮动 背景图设置 相对定位绝对定位

    1.练习浮动 2.文本属性和字体属性 文本对齐 ​ text-align left 左对齐 right 右对齐 center 中心对齐 justify 两边对齐 只适应于英文 text-indent ...

  9. cordova 导致css中绝对定位top:0会被顶到视图之外

    IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...

  10. z-index 可以使用负值,CSS相对定位、绝对定位利器

    很多技巧都是在工作中测试出来的,我搞DIV+CSS前端开发,现在是安卓收藏家,日常也有很多技巧,刚刚突然发现的这个技巧,真的很实用:Z-index值可以使用负值. z-index是个很强大的属性,是个 ...

随机推荐

  1. ASP.NET MVC 下 引用阿里巴巴和IconFont字体路径404问题

    参考:http://stackoverflow.com/questions/28169365/font-wont-get-found-on-server-for-firefox# http://blo ...

  2. 【CF】223 Div.1 C Sereja and Brackets

    水线段树. /* 380C */ #include <iostream> #include <string> #include <map> #include < ...

  3. 【HDOJ】1166 敌兵布阵

    线段树. #include <stdio.h> #define maxn 55555 ]; void PushUP(int rt) { sums[rt] = sums[rt<< ...

  4. Vijos_1218_数字游戏_(划分型动态规划+环状动态规划)

    描述 https://vijos.org/p/1218 给出n个数围成一个环,将其划分成k个部分,每个部分求和再对10取模,最后将每个部分的值相乘,求其最大值与最小值. 描述 丁丁最近沉迷于一个数字游 ...

  5. [ZOJ 3622] Magic Number

    Magic Number Time Limit: 2 Seconds      Memory Limit: 32768 KB A positive number y is called magic n ...

  6. VM Depot 助您使用本地开源软件架设开发 Web 站点

     发布于 2014-04-25 作者 云 浪生 使用 VM Depot 中的镜像在 Azure 上创建.开发.部署网站与应用不仅方便快捷而且省时省力!感谢开源社区的大力支持,我们的VM Depot ...

  7. (转载)更好的重启nginx 服务器

    (转载)http://jar-c.blog.163.com/blog/static/1164012502010511128782/ 以前使用的重启命令 killall  -HUP nginx 停止ki ...

  8. HDU 5948 Thickest Burger 【模拟】 (2016ACM/ICPC亚洲区沈阳站)

    Thickest Burger Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  9. HDU-1390 Binary Numbers

    http://acm.hdu.edu.cn/showproblem.php?pid=1390 Binary Numbers Time Limit: 2000/1000 MS (Java/Others) ...

  10. SQL SERVER 的 INFORMATION_SCHEMA 的使用

    ------------------------------------------------------- 第一个查询看看库里有多少个表,表名等 select * from INFORMATION ...