1.前言 
我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table。这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性和div的float属性,布局是非常灵活的,这里详细说一下div的position,没想象中那么简单,也没想象中那么复杂。

2.position的四种取值 
static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定 
relative:relative 就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定relative并指定top是10象素时,元素实际top就是60象素了。 
absolute:absolute绝对定位,直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢,容器就是离元素最近的一个定位好的“祖先”,定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器,那就使用浏览器初始的,也就是body或者html元素。标准是说只需要指定left和right,width可以自动根据容器宽度计算出来,可惜ie不支持。 
fixed:fixed才是真正的绝对定位,其位置永远相对浏览器位置来计算。而且就算用户滚动页面,元素位置也能相对浏览器保持不变,也就是说永远可以看到,这个做一些彩单的时候可以用。可惜的是ie还不支持

3.relative,absolute,fixed需要指定具体位置 
relative,absolute,fixed如果不指定它的top,left等属性,那么它的position实际上依然是static。使用了relative,absolute,fixed就必须指定具体的位置。

4.关于DIV的嵌套 
我们设定外层div的名字为div1,内层div的名字为div2

4.1如果div1的position是static,说明div2位置是出现在哪里就显示在哪里。如下图: 

div1的position是static,div2的position是absolute,这样div2就不受外层div的约束了。如果div2的position是relative,top:20px;但实际上,div2距离顶端是36px(大于20px),不知道是不是浏览器的bug,ie和Firefox都如此。 
代码如下

 

4.2如果div1的position是relative,这样div2的position不管是relative还是absolute,显示的效果基本是一样的,都是内层div针对外层div的位置。如下图:

不过这两者还有有区别的,如两张图片。如果div2的position是relative,top:20px;但实际上,div2距离顶端是36px(大于20px),但如果div2的position是absolute,top:20px;div2距离顶端的高度就精确的是20px。 
代码如下

<div style="position:relative;width:600px;height:400px;background:#FFE4C4;">
position:relative;width:600px;height:400px;background:#FFE4C4
<div style="position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E">position:absolute;top:20px;left:10px;width:500px;height:350px;background:#D2691E
</div>
</div>

4.3如果div1的position是absolute,这样div2的position也是absolute,那么div2的位置实际上是一个相对位置。如下图:

5.如果div的position是fixed,就不用说了,其位置永远相对浏览器位置来计算。

6.问题 
从div的嵌套可以看出:position:relative,top:20px;无论是上级div的position是什么属性,实际上距离顶端总是大于20px。解决方案也很简单,不用top而用margin来代替。或者根据实际情况微调下。

转自http://ggmmy.blog.163.com/blog/static/2062262882012111962629751/

DIV的Position属性和DIV嵌套DIV的更多相关文章

  1. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  2. <转载>DIV+CSS position定位方法总结

    如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...

  3. 对CSS中的Position属性的一些深入探讨

    转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...

  4. Position属性四个值:static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  5. DIV-CSS布局中position属性详解

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  6. 定位上下文(补充css的position属性)

    ]把元素的position属性设定为relative.absolute或fixed后,继而可以使用TRBL属性,相对于另一个元素移动该元素的位置.这里的“另一个元素”,就是该元素的定位上下文. 绝对定 ...

  7. Vue学习笔记【28】——Vue路由(使用 children 属性实现路由嵌套)

    使用 children 属性实现路由嵌套   <div id="app">    <router-link to="/account"> ...

  8. div+css的属性

    div+css的属性 gCascading Style Sheet 层叠式样式表 ==> 层叠样式表 Internal Style Sheet 内部样式表 External Style Shee ...

  9. HTML中div嵌套div的margin不起作用

    下面介绍一下div嵌套div时margin不起作用的解决方案. 顺便科普下margin的定义和用法. div嵌套的HTML代码: <!DOCTYPE html> <html lang ...

随机推荐

  1. Architectural Model - SNMP Tutorial

    30.3 Architectural Model Despite the potential disadvantages, having TCP/IP management software oper ...

  2. WinForm------GridControl合并单元格

    1.修改GridView的属性 2.点击Run Design修改需要合并的列的属性 3.给GridView添加事件(以上两步不行的情况下再使用此方法) private void gridView1_C ...

  3. 深入理解javascript原型和闭包(18)——补充:上下文环境和作用域的关系

    本系列用了大量的篇幅讲解了上下文环境和作用域,有些人反映这两个是一回儿事.本文就用一个小例子来说明一下,作用域和上下文环境绝对不是一回事儿. 再说明之前,咱们先用简单的语言来概括一下这两个的区别. 0 ...

  4. @SuppressWarnings的参数

    @SuppressWarnings 是J2EE的最后一个批注,该批注的作用是告诉编译器对被批注的元素内部的某些警告保持静默 @SuppressWarnings("unchecked" ...

  5. [译]ES6中的代理对象

    原文:http://ariya.ofilabs.com/2013/07/es6-and-proxy.html 能够拦截在一个对象上的指定操作的能力是非常有用的,尤其是在故障调试的时候.通过ECMASc ...

  6. FireBug提示:本页面不包含 JavaScript,明明是包含js的。

    本页面不包含 JavaScript 如果 <script> 标签有 "type" 属性, 其值应为 "text/javascript" 或者 &qu ...

  7. 微信 5.3 for iPhone已放出 微信iphone版更新下载

    就在几个小时前,微信发布了更新,本次只放出微信 5.3 for iPhone,距离发布微信5.3内测版也就几天时间.和往常一样微信iphone版先发布,微信android版延后发布,微信看重的是ios ...

  8. python 字典的函数

    clear(),清空 注意单纯的赋值就相当于c语言中引用,只事额外起了一个别名,所以他们指向相同的地址, 所以令c={},只是另外开辟了一个新的空间让c为空,并没有改变之前的空间,所以{}与clear ...

  9. 音频指纹(Philips)

    参考<A Highly Robust Audio Fingerprinting System> Philips 音频指纹提取流程: 仿真效果: 第一个图为歌曲1的第一个指纹. 第二个图为歌 ...

  10. Opera Browser -- Access Restricted Sites using Free VPN /Free VPN Services List

    Opera Browser  -- Access Restricted Sites using Free VPN: currently the feature is available in Oper ...