CSS关于相对定位和绝对定位的说明实例_ Div+Css教程-查字典教程网
CSS关于相对定位和绝对定位的说明实例
CSS关于相对定位和绝对定位的说明实例
发布时间:2016-12-29 来源:查字典编辑
摘要:body{margin:30px;font-size:9pt;}.a,.b,.c,.d,.e{width:100px;height:100p...

<style>

body

{margin: 30px; font-size:9pt;}

.a, .b, .c, .d, .e

{

width: 100px;

height: 100px;

margin: 5 auto;

color: #fff;

background: #000;

}

.aa, .bb, .cc, .dd, .ee

{

top: 10px;

left: 10px;

width: 10px;

height: 10px;

overflow: hidden;

background: #F90;

}

.b, .d, .e

{position: relative;}

.cc, .dd, .ee

{position: absolute;}

</style>

<div>

<div></div>

A:均不设置postion,一般嵌套关系

</div>

<div>

<div></div>

B:仅外div设置relative,一般嵌套关系

</div>

<div>

<div></div>

C:仅内div设置absolute,文档中为嵌套关系,页面中内div浮起[非float],相对于页面定位,与外div无关。

</div>

<style>

body

{margin: 30px; font-size:9pt;}

.a, .b, .c, .d, .e

{

width: 100px;

height: 100px;

margin: 5 auto;

color: #fff;

background: #000;

}

.aa, .bb, .cc, .dd, .ee

{

top: 10px;

left: 10px;

width: 10px;

height: 10px;

overflow: hidden;

background: #F90;

}

.b, .d, .e

{position: relative;}

.cc, .dd, .ee

{position: absolute;}

</style>

<div>

<div></div>

A:均不设置postion,一般嵌套关系

</div>

<div>

<div></div>

B:仅外div设置relative,一般嵌套关系

</div>

<div>

<div></div>

C:仅内div设置absolute,文档中为嵌套关系,页面中内div浮起[非float],相对于页面定位,与外div无关。

</div>

<div>

<div ></div>

D:外div设置relative,内div设置absolute,内div浮起来并相对于外div定位

</div>

<div>

<div></div>

D:外div设置relative,内div设置relative,内div浮起来并相对于外div定位

</div>

<div>

<div></div>

E:这个是说明边界问题。-10 != 反向10px间距

</div>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类