<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <div id="div1"></div>

     <div id="div2"></div>

     <div id="div3"></div>

     <div id="div4"></div>

     <div id="div5"></div>

     <div id="div6"></div>

     <div id="div7"></div>

     <div id="div8"><img src="img/草1.jpg"></div>

     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

     <div id="div9">

         文字

         <input type="text" name="">

         <img src="img/鸟1.jpg">

         <p id="p1">哈哈</p>

         <div id="div10"></div>

     </div>

     <br><br><br><br><br><br><br>

     <div id="div11"></div>

     <div id="div12"></div>

     <div id="div13"></div>

     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

     <p>让窗口滚动起来</p>

 </body>

 </body>

 </html>
 #div1{

     width: 100px;

     height: 100px;

     background: red;

     /*position: relative;*//*相对定位对象会占据原来位置*/

     position: absolute;/*绝对定位对象可以层叠。absolute相对与父元素body来定位*/

     left: 100px;

     }

 #div2{

     width: 100px;

     height: 100px;

     background: green;

     /*position: relative;*//*相对定位和绝对定位都需要结合left、right、top、bottom使用*/

     position: absolute;

     right: 50px;

     }

 #div3{

     width: 100px;

     height: 100px;

     background: blue;

     /*position: relative;*/

     position: absolute;

     top: 50px;

     }

 #div4{

     width: 100px;

     height: 100px;

     background: pink;

     /*position: relative;*/

     /*position: absolute;*/

     /*position: fixed;*//*滚动窗口时fixed定位的内容不会被滚动，相对于窗口来定位。*/

     /*position: static;*//*默认值，没有定位*/

     /*bottom: 10px;*/

     }

 #div5{

     width: 200px;

     height:200px;

     background: rgba(255,0,0,0.5);

     position: relative;

     left: 200px;

     z-index:;

 }

 #div6{

     width: 200px;

     height:200px;

     background: rgba(0,255,0,0.5);

     position: relative;

     left: 300px;

     top: -100px;

     z-index:;

 }

 #div7{

     width: 200px;

     height:200px;

     background: rgba(0,0,255,0.5);

     position: relative;

     left: 400px;

     top: -200px;

     z-index:;/*1在最底层*/

 }

 #div8>img{

     /*position: fixed;*/

     clip: rect(10px,160px,160px,10px);/*只有在position为absolute或fixed时才会起作用，在position为relative或static时无效。*/

 }

 #div9{

     width: 100%;

     height: 500px;

     background: rgba(100,100,100,0.3);

 }

 #p1{

     display: inline-block;

     vertical-align: 20px;

 }

 #div10{

     width: 100px;

     height: 100px;

     background: pink;

     display: inline-block;

     vertical-align: text-top;/*可设text-bottom、sub、super*/

 }

 input{

     vertical-align: top;/*可设baseline默认、top、middle、bottom、像素、百分比*/

 }

 #div11{

     width: 200px;

     height: 200px;

     background: red;

     float: left;

 }

 #div12{

     width: 200px;

     height: 200px;

     background: green;

     float: left;

 }

 #div13{

     width: 200px;

     height: 200px;

     background: blue;

     clear: left;/*清除浮动clear:both、left、right、none*/

 }

【CSS3】定位的更多相关文章

  1. CSS3定位和浮动详解

    本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下 一.定位 1. css定位: 改变元素在页面上的位置 2. css定位机制: 普通流: 浮动: 绝对布局: 3. cs ...

  2. CSS3 定位| Position研究

    视区(视口) 当浏览者查看一份网页文件时,通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域).当我们调整视区大小时,UA 就有可能会改变 ...

  3. 6.css3定位--position

    ⑴Static默认值,没有定位. ⑵Absolute绝对定位.后面的元素会补上原来偏移的位置. ⑶Relative相对定位.后面的元素不会补上原来偏移的位置. ⑷Fixed绝对定位.相对于浏览器窗口固 ...

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

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

  5. 转：python webdriver API 之简单对象的定位

    对象(元素)的定位和操作是自动化测试的核心部分,其中操作又是建立在定位的基础上的,因此元素定位就显得非常重要. (本书中用到的对象与元素同为一个事物)一个对象就像是一个人,他会有各种的特征(属性) , ...

  6. CSS选择器定位的使用

    CSS 可以比较灵活选择控件的任意属性,一般情况下定位速度要比XPath 快,但对于初学者来说比较难以学习使用,下面我们就详细的介绍CSS 的语法与使用.一.CSS 选择器的常见语法: 例如下面一段代 ...

  7. 一起感受HTML5和CSS3

    Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和&l ...

  8. 自动化测试selenium----css选择器总结

      选择器 示例 描述 * * 匹配任何元素 element DIV 标签选择器,匹配所有使用DIV标签的元素 .class .tips class选择器,匹配所有class属性中包含info的元素 ...

  9. Web 端自动化测试

    一.环境搭建 准备工具如下:下载 python[python 开发环境](http://python.org/getit/) 下载setuptools: [python 的基础包工具](http:// ...

  10. CSS选择器语法&示例

    CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) ...

随机推荐

  1. 五、VueJs 填坑日记之将接口用webpack代理到本地

    上一篇博文,我们已经顺利的从cnodejs.org请求到了数据,但是大家可以注意到我们的/src/api/index.js的第一句就是: // 配置API接口地址 var root = 'https: ...

  2. .net core2.0下使用Identity改用dapper存储数据

    前言. 已经好多天没写博客了,鉴于空闲无聊之时又兴起想写写博客,也当是给自己做个笔记.过了这么些天,我的文笔还是依然那么烂就请多多谅解了.今天主要是分享一下在使用.net core2.0下的实际遇到的 ...

  3. android TransFormexecption 解决

    近期编译的时候遇到这个问题.... > com.android.build.api.transform.Transformexception: java.util.zip.ZipExceptio ...

  4. 数据结构 集合_集合（数学）抽象数据类型的C语言实现

    链表是实现集合的一种理想的方式.将List以typedef的方式重命名为Set.这样做能保留链表简洁的特性,还能使集合具有了一些多态的特性. 使用这种方法的最大好处就是可以使用list_next来遍历 ...

  5. Windows下安装BeautifulSoup

    python版本为2.7 1.去官网下载BeautifulSoup4 Beautiful Soup 4.3.2 2.解压文件 将下载得到的压缩包解压到任意文件夹,路径不含中文 3.打开cmd命令提示符 ...

  6. 解决微信公众平台IP白名单

    微信公众平台,作为自媒体的旗舰级产品,越来越多的人已经投入它的怀抱.正如它的广告词所说:再小的个体,也有品牌 好吧,闲话不多说,今天要说的是它的IP白名单机制. 我们现在安装的大部分的电信的家庭级别的 ...

  7. JavaScript提高篇之预解释作用域以及this原理及其应用

    1.预解释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. 【转】【JAVA应用】多线程断点下载

    [转自] 光仔December http://blog.csdn.net/acmman 问题:多线程下载的好处? 多线程下载比单线程下载快,主要的原因是采用多线程下载,可以抢占更多的服务器资源.抢占C ...

  9. Dubbo源码学习--服务发布（ServiceBean、ServiceConfig）

    前面讲过Dubbo SPI拓展机制,通过ExtensionLoader实现可插拔加载拓展,本节将接着分析Dubbo的服务发布过程. 以源码中dubbo-demo模块作为切入口一步步走进Dubbo源码. ...

  10. Python之可变类型与不可变类型

    Python常见的数据类型有:数字 字符串 元组 列表 字典 不可变类型:数字 字符串 元组 可变类型: 列表 字典 a = 100 b = [100] def num1(x): x += x pri ...