热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

absolute与relative的运用示例

Div+CSS进行网页布局,适当地运用absolute与relative,能给布局带来意想不到的效果和方便,达到事半功倍…本文介绍了关于absolute与re

Div + css 进行网页布局,适当地运用 absolute 与 relative,能给布局带来意想不到的效果和方便,达到事半功倍…本文介绍了关于 absolute 与 relative 的运用。

  详细讲解两者的关系,需要配合例子,请先看例子:

 

以下是引用片段:
 
http://www.w3.org/1999/xhtml”> 
 
 
 

http://www.gaodaima.com/37665.htmlabsolute与relative的运用示例

 
 
 
 position: absolute; 
 top: 5px; 
 right: 20px; 
  
position: absolute; 
left: 20px; 
bottom: 10px; 
 
 
 
 position: absolute; 
 top: 5px; 
 left: 5px; 
 
 
 position: relative; 
 left: 150px; 
  
 width: 300px; height: 50px;  
 
 
   
  

1

 
  

2

 
  

3

 
  

4

 
  

5

 
   
    padding: 20px 0 0 20px; 
  position: absolute; 
   
    position: relative; 
   left: 200px; 
    
   width: 300px; 
   height: 300px; 
    
    position: absolute; 
    top: 20px; 
    right: 20px; 
    
    position: absolute; 
  bottom: 20px; 
  left: 20px; 
   
   
   
  
 
 
 
 

欢迎大家阅读《absolute与relative的运用示例》,跪求各位点评,若觉得好的话请收藏本文,by



推荐阅读
author-avatar
曾经
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有