HTML学习笔记 css定位(静态,相对,固定,绝对布局)偏移案例 第十二节 (原创) 参考使用表
2024-10-19 05:29:01
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS定位(静态,相对,固定,绝对布局)小广告案例</title> <link rel="stylesheet" href="tzy.css" type="text/css"> </head> <body> <div id="position1"></div> <script> for(var i=0;i<10;i++){ document.write(i+"<br/>"); } </script> <div id="position2"></div> <script> for(var i=10;i<20;i++){ document.write(i+"<br/>"); } </script> <div id="position3"></div> <script> for(var i=20;i<50;i++){ document.write(i+"<br/>"); } </script> <br/><br/><br/><br/><br/> <div id="position4"></div> <script> for(var i=30;i>0;i--){ document.write(i+"<br/>"); } </script> <div id="position5"></div> <div id="position6"></div> </body> </html>
#position1{ width: 100px; height: 100px; background-color: mediumturquoise; position: relative; /*相对布局(无变化)*/ left:2px; /*向左偏移*/ } #position2{ width: 100px; height: 100px; background-color: mediumturquoise; position: absolute; /*绝对布局(无变化)*/ left:10px; /*向左偏移*/ } #position3{ width: 100px; height: 100px; background-color: forestgreen; position: fixed; /*固定布局(无变化)*/ z-index:; /*值大的更靠近用户*/ } #position4{ width: 100px; height: 100px; background-color: mediumturquoise; position: static; /*静态布局(无变化)*/ right: 100px; /*向右偏移100px*/ left:20px; /*向右偏移*/ /*偏移无用*/ } #position5{ width: 100px; height: 100px; background-color: mediumturquoise; position: relative; /*相对布局(无变化)*/ top: 20px; /*向上偏移100px*/ left:20px; /*向左偏移*/ z-index:; /*值大的更靠近用户*/ } #position6{ width: 100px; height: 100px; background-color: coral; position: relative; /*相对布局(无变化)*/ left:10px; /*向左偏移*/ z-index:; /*值大的更靠近用户*/ } /*静态无法被控制 其他的都可以*/
最新文章
- 解读ASP.NET 5 &; MVC6系列(17):MVC中的其他新特性
- 从零开始山寨Caffe&#183;柒:KV数据库
- div模拟textarea实现高度自增长
- 第二次冲刺-Runner站立会议01
- centos 7 DenyHosts 安装 防暴力破解ssh登陆
- 史上最全的maven pom.xml文件教程详解
- TF255466: Team Foundation Server 的配置过程无法继续。以前的更新或安装需要重
- iOS - UIWindow
- 二模07day2解题报告
- uestc 1722 吴神的表白
- usb mass storage device
- hdu 1558 Segment set
- win32控制台实现按任意键退出的功能
- [转]Laravel 4之URL生成
- URL传参中文乱码encodeURI、UrlDecode
- OpenCV 安装
- 【转】delphi 保存到txt文件
- FragmentTabHost使用注意
- NIO基础篇(三)
- JPA实现复杂条件分页查询
热门文章
- 详解MySQL基准测试和sysbench工具
- Sql Server——查询(二)
- nodejs+express+mongoose无法获取数据库数据问题解决
- webpack2使用ch3-自动化生成.html和内部引入的js自动更改
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
- DataGridView一些常用操作
- MVVM -- CallMethodAction 和 InvokeCommandAction
- 【框架学习与探究之AOP--Castle DynamicProxy】
- Python基础3切片,字符串的方法
- Cosmos OpenSSD--greedy_ftl1.2.0(二)