<!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定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表的更多相关文章

  1. [CSS3] 学习笔记-CSS定位

    页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...

  2. HTML学习笔记 css定位浮动及瀑布流案例 第十三节 （原创） 参考使用表

    #fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; ...

  3. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  4. Windows phone 8 学习笔记(8) 定位地图导航

    原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...

  5. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  6. amazeui学习笔记--css（常用组件10）--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  7. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  8. amazeui学习笔记--css（基本样式4）--打印样式Print

    amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...

  9. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

随机推荐

  1. [Oracle]理解undo表空间

    一.回退段介绍 在Oracle数据库中,当某个事物对数据进行修改时,Oracle首先将数据的原始值保存到一个回退段中.一个事物只能将它的回退信息保存到一个回退段中,而多个并行事物可以使用同一个回退段. ...

  2. ThreadLocal的理解与应用场景分析

    对于Java ThreadLocal的理解与应用场景分析 一.对ThreadLocal理解 ThreadLocal提供一个方便的方式,可以根据不同的线程存放一些不同的特征属性,可以方便的在线程中进行存 ...

  3. 使用Scrapy创建一个爬虫

    使用Scrapy创建一个爬虫 创建项目 您可以使用下面的命令来创建 Scrapy 项目: scrapy startproject 项目名称 例:scrapy startproject scrapy_p ...

  4. 史上前端面试最全知识点（附答案）---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  5. [#1] YCbCr与RGB的转换公式

    1 YCbCr简介 YCbCr颜色空间是将RGB颜色空间进行坐标转换后得到的,常用于数字电视系统.Y取值范围:16~235 Cb.Cr的取值范围:16~240 YCbCr经常和YUV混淆.两者的主要差 ...

  6. Bootstrap列表与代码样式(附源码)--Bootstrap

    给大家分享下Bootstrap框架中列表与代码样式相关的知识 1.列表 (1)无序列表 <ul> <li>CN217编程</li> </ul> 注意:u ...

  7. 【特效】单选按钮和复选框的美化（只用css）

    表单的默认样式都是比较朴素的,实际页面中往往需要美化他们.这里先说说单选按钮和复选框,有了css3,这个问题就变的好解决了.利用input与label相关联,对label进行美化并使其覆盖掉原本的in ...

  8. spring mvc 多线程并发

    ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地编写出优美的多线程程序. http://www.xuebuyuan.com/1628190.html 我们 ...

  9. EF框架搭建小总结--ModelFirst模型优先

    前言:去年刚工作的时候,也是刚刚正式接触.net,当时了解了EF以及三种开发模式,Database First.Model First .Code First.公司用的开发模式是Database Fi ...

  10. Learning Scrapy 中文版翻译 第一章

    第一章:scrapy介绍 欢迎来到scrapy之旅.通过这本书,我们将帮助你从只会一点或者零基础的Scrapy初学者达到熟练使用这个强大的框架在互联网或者其他资源抓取海量的数据.在这一章节,我们将给你 ...