当前位置:  编程技术>WEB前端

CSS关于相对定位和绝对定位的说明实例

    来源: 互联网  发布时间:2014-09-06

    本文导语:  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{p...


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;}


  

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


  

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


  

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



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;}


  

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


  

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


  

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


  

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



  

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


  

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


    
 
 

您可能感兴趣的文章:

  • CSS定位中Positoin、absolute、Relative的一些研究
  • css元素定位
  • div+css详解定位与定位应用
  • 推荐深入理解css中的position定位和z-index属性
  • web标准布局实例教程,用定位轻松解决CSS复杂布局
  • css首字放大实例代码
  • css Hspace 和vspace的图片控制实例
  • css font缩写总结附实例
  • css Sprites小实例代码
  • DIV+CSS网页另类上下布局的实例代码
  • CSS3实例分享之多重背景的实现(Multiple backgrounds)
  • <font color=red>又一个典型css实例
  • 一个自动居中的导航条实例与相关问题 DIV+CSS
  • 第9天:第一个CSS布局实例
  • CSS可以做的几个令你叹为观止的实例分享
  • 代码实例之纯CSS代码实现翻页效果
  • <font color=red>CSS 实用实例(推荐)
  • CSS标签切换代码实例教程 比较漂亮
  • css实现气泡框效果(实例加图解)
  • 仿客齐集首页导航条DIV+CSS+JS [代码实例]
  • jquery获取css中的选择器(实例讲解)
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • CSS属性 - white-space 空白属性使用说明
  • CSS的color颜色使用说明
  • CSS选择符说明
  • td nowrap css nowrap使用说明于注意事项
  • DIV+CSS经常用到的属性、参数及说明
  • 空间页面CSS说明
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3