div+css网页布局设计新开端（10）

黄舟

发布时间：2016-12-29 15:01:12

1520人浏览过

来源于php中文网

原创

下面说说相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

简单的说，相对定位就是根据他自身定位，他的坐标点就是他自身div的左上角

可以看出相对定位是根据自身来定位，而且不会受父div的约束
有人可能会问，他以前的位置在哪？又如何根据自身定位的
把position: relative;去掉则就是他以前的位置

如果父层定义绝对定位或相对定位会怎样呢？

你会发现没有变化
也就是说，相对定位不管父层是普通的div，还是浮动或者绝对定位和相对定位，对其本身移动无任何影响，他只以自己左上角坐标点移动，这点是独立的
但是，父层的改变会影响到他原来的位置，他是根据原来位置的左上角来移动，然后到一个新的位置，所以说父层如何移动的话，那么他也会相应的移动

当相对定位div碰到普通div

#c{
width:100px;
height:100px;
border:soild;
background:red;
} 
#b{
width:100px;
height:100px;
border:soild;
background:green;
position: relative; }

立即学习“前端免费学习笔记（深入）”；

绿色是相对定位div，可以看出，如果不给相对定位div定义坐标（也就是top，left），他跟普通div是没两样的，同样的遵循地面的流模式，地上的div也看的到他，如果红色是浮动div，那么他也会像普通div看不到浮动div，从而去红色那区域
如果给他定义坐标

#b{
width:100px;
height:100px;
border:soild;
background:green;
position: relative;
top:-20px: /*向上移动，同样left有负值就是向左移动*/
left:20px;
}

可以看出他可以覆盖红色区域，这跟绝对定位是一样的
也就是说，没定义坐标之前，他是没起飞的，跟普通div一样
定义了坐标之后，他就起飞了，而且是飞艇
这里多说一下，如果绝对定位一开始没定义坐标，他就在浏览器左上角或者父层(要定义绝对或相对定位)的左上角，它是一直在空中的，不会占用地上的区域
而相对定位起飞后跟绝对定位是一样的，可以在空中自由移动，不必遵循流，只是他们两个取的坐标起始点不同而已
但是相对定位没起飞就是普通div，占用地上的区域，遵循流
起飞后，他原来的区域（就是没起飞的时候的位置）还得保留的，不会让普通div和浮动div给占了
就是起飞的时候告诉网页：“老子起飞后还要看到我原来的位置是空的，别让其他层给我占了！！”

绿色是相对定位div，红色是普通div，这里可以看出，就算绿色主动移动在下面，红色也不会去占用那块区域

当相对定位遇到相对定位

仿虎嗅网在线视频教育门户源码2.0

仿虎嗅商学院在线视频教育门户网站源码，织梦内核，页面简洁，容易维护修改；适合做在线教育类网站，网站模板修改简单，网站设置多个广告位方便放置广告。适用于视频网站，在线教育、在线商学院；图片展示效果极佳;网站手工div+css，代码精简，首页排版整洁大方、布局合理、利于SEO、图文并茂、静态HTML；首页和全局重新做了全面优化，方便大家无缝使用。

下载

红色的没起飞，绿色的起飞了，但绿色的在红色下面，这说明没定义坐标的相对定位div并不绝对等于普通div，当俩个相对定位一起出现时，最后出现的会覆盖前面的，这跟绝对定位是一样的，绿色在空中，红色的地面，由于红色最后出现，所以绿色覆盖红色的部分要透明化
（还有一种理解，就是相对定位也一直是在空中，它所占的区域跟地面是同步的，也就是地面的div不能跑到它下面来，但条件是，它必须遵循地面的流模式规则，具体用哪种理解，看你们觉得哪种好理解了。我承认这里稍微有点乱。。。）

当相对定位遇到绝对定位

一样的，红色在上面
表示相对定位和绝对定位没区别，只是坐标起始点不同而已
他们同样可以用z-index设置层叠顺序，相对定位遇到相对定位也一样

下面在说说固定定位 fixed ；根据这个设置top left

其实很简单，就是固定在一个位置，浏览器（滚动条）怎么移动都不会动

百度贴吧右下角

返回顶部就是用的固定定位

position 属性值的含义：
static （默认就是这个）
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

下面总结一下
普通div--地面遵循地面流模式
浮动div--空中遵循空中流模式都同一高度
定位div--空中不遵循流模式比浮动div要高并非都同一高度

在页面布局中，一般把大框（最父层）定义成相对定位，但不给坐标，这样他可以遵循流模式，居中什么的都很方便，而大框里面就用绝对定位了，这样就可以随着大框移动而移动
但用不用定位也不是必须的，喜欢用margin也可以，但肯定没绝对定位&相对定位方便
网页布局的发展
table定位---margin定位---绝对&相对&固定定位

好了，差不多把最主要的讲完了，现在截几张图参考下吧