css中的四种定位方式示例介绍
2013-12-31 17:09
585 查看
/*通配符选择器*/ *{ margin:0px; padding:0px; } /*div的选择器*/ .div1{ border:1px solid red; background:silver; width:60px; height:30px; float:left; margin-left:5px; } .div2{ position:relative; left:10px; top:10px; width:100px; height:80px; background:pink; float:left; margin-left:5px; } /*相对定位,他原来的空间任然保留*/ #spe{ position:relative; top:40px; left:20px; } /*绝对定位:元素框从文档流里完全删除 对该元素最近的那个脱离了标准流的元素定位*/ #spe2{ position:absolute; top:40px; left:20px; } /*固定定位,只想对于视图的左上角定位*/ #spe{ position:fixed; top:40px; left:20px; } /*静态定位是默认的static left、top此时没有效果 靠margin来移动位置*/ /*z-index用于设置对象(div)显示时候,层叠的属性, z-index值越小,则越在下层显示*/ [html] view plaincopy在CODE上查看代码片派生到我的代码片 <html> <head> <link rel="stylesheet" type="text/css" href="position.css"/> </head> <body> <div class="div1">内容1</div> <div class="div1">内容3</div> <div class="div1">内容4</div> <div class="div2"> <div class="div1" id="spe2">内容2</div> </div> </body> </html>
相关文章推荐
- html引入css四种引入方式示例分享
- CSS的三种定位方式介绍
- CSS的三种定位方式介绍
- 安卓定位的四种介绍方式
- css与html常见的三种结合方式示例介绍
- css 四种定位方式
- 关于四种定位方式的介绍
- CSS中position定位的个熟悉示例介绍
- CSS的三种定位方式介绍
- CSS之四种定位的理解
- jQuery 设置 CSS 属性示例介绍
- HTML中引入CSS的四种方式
- 纯css,js原生,js原型,jquery四种方式实现轮播图效果
- 四种生成和解析XML文档的方法详解(介绍+优缺点比较+示例)
- 初学者之CSS学习(一)CSS的四种引入方式
- document节点对象的获取方式示例介绍
- 使用POST方式弹出窗口的两种方法示例介绍
- jquery JSON的解析方式示例介绍
- CSS Position定位属性介绍
- JavaScript四种调用模式和this示例介绍