HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表
<!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:;
/*值大的更靠近用户*/
}
/*静态无法被控制 其他的都可以*/
HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表的更多相关文章
- [CSS3] 学习笔记-CSS定位
页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...
- HTML学习笔记 css定位浮动及瀑布流案例 第十三节 （原创） 参考使用表
#fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; ...
- amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- Windows phone 8 学习笔记(8) 定位地图导航
原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css（常用组件10）--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
随机推荐
- css3动画：弹出式菜单
css3动画:弹出式菜单 今天主要来讲讲transition和transform结合做的动画,会举一些现在(2017年)常见的动画例子. 注:本人也接触css3不久,如果写的有纰漏请指出,不喜勿喷. ...
- Java并发/多线程系列——线程安全篇（1）
创建和启动Java线程 Java线程是个对象,和其他任何的Java对象一样.线程是类的实例java.lang.Thread,或该类的子类的实例.除了对象之外,java线程还可以执行代码. 创建和启动线 ...
- 实际开发--->php时间函数
当前日期(例:2017-10-04):date('Y-m-d',time()); 当前时间戳:strtotime(date('Y-m-d H-i-s',time()); 当前年月(例:2017-10) ...
- spring boot系列01--快速构建spring boot项目
最近的项目用spring boot 框架 借此学习了一下 这里做一下总结记录 非常便利的一个框架 它的优缺点我就不在这背书了 想了解的可以自行度娘谷歌 说一下要写什么吧 其实还真不是很清楚,只是想记录 ...
- Oracle 定时查询数据插入新表中（job+存储过程）
create table EGMAS_COUNT_DATA(TIMES date not null, COUNT NUMBER(30) not null, SYSTEM_NAME VARC ...
- The Twelve-Factor App 实践
The Twelve-Factor App <The Twelve-Factor App>定义了一个优雅的互联网应用在设计过程中,尤其是在设计SAAS服务时,需要遵循的一些基本原则.本文为 ...
- jQuery Mobile 所有data-*选项，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...
- layer.msg 添加在Ajax之前 显示进度条。
一.使用方法:1)必须先引入jQuery1.8或以上版本 <script src="jQuery的路径"></script> <script src= ...
- PHP连接mysql数据库进行增删改查--删除
删除: 1.首页 在foreach里面加入 <td><a href='dele.php?id={$i[0]}'>删除</a></td> 在上面< ...
- Java IO流 思维导图