html:定位层
1、概念:
　　　>>、定位层是由html元素(标签)形成的一个特殊的box盒子。
　　　>>、其重点在于“定位”，而html元素(标签)的定位方式由CSS来控制。
　　　　　　通常情况下，html元素(标签)默认的定位方式叫做“静态定位”，存在于普通文档流中。
　　　　　　而定位层则是指的那些修改了定位方式的box，即非静态定位的box。
　　　>>、定位层的“定位”需要根据参照对象来实现定位的位置。
　　　>>、定位层的主要作用是用来实现小范围内容元素的排版和定位。

2、定位属性:position

　　>>作用:规定html元素的定位类型

　　　　
　　>>原理:
　　　　脱离页面文档流，独立于立体层面的Z轴之上
　　　　从立体Z轴的角度看，定位层在浮动元素之上

　　　　

3、相关属性:
　　>>、当html元素(标签)被设置成定位层(非static)之后，可以激活定位相关的属性设置。
　　　　

　　　　这四个定位控制属性均可以使用负值。同方向有冲突时，以top、left优先。
　　　　　　比如元素同时设置top和bottom，left和right，则以top 和 left为优先，
　　　　　　因为浏览器解析元素时，默认也是从top、left开始。

　　>>、z-index
　　　　z-index的值是指定是顺序关系，因此是number数字形式，没有单位
　　　　z-index的值允许设置负值。当值为负值时，定位层处于普通文档流之下，会被覆盖。

　　　　

 4、代码示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>定位层的演示</title>

     <style>

         *{margin: 0;padding: 0;}

         div{width:150px;height: 150px;}

         .box1{background:#ff0;}

         .box2{background:#f00;position:absolute;left:-50px;top:50px;z-index:6;}

         .box3{background:#00f;width:200px;height:200px;}

         .bigbox{width:300px;height:300px;background-color:orange;position:absolute;z-index:-99;}

         .box5{width:50px;height: 50px;background: green;position:absolute;z-index:1;}

     </style>

 </head>

 <body>

     <div class="box1">box1</div>

     <div class="bigbox">

         <div class="box2">box2</div>123

         <div class="box5">box5</div>

     </div>

     <div class="box3">box3</div>

 </body>

 </html>
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             height: 200px;

             width: 200px;

             font-weight: bolder;

             line-height: 200px;

             text-align: center;

         }

         /*相对定位:元素位置改变后，它移动前的位置会保留下来，不会被其他元素占据*/

         .relative{

             background-color:blue;

             position: relative;

             left: 100px;

             top:50px;

         }

         /*绝对定位:元素位置改变后，它移动前的位置不会保留下来，会被其他元素占据*/

         .absolute{

             background-color:red;

             position:absolute;

             left:50px;

         }

         /*fixed定位:元素位置改变后，它移动前的位置不会保留下来，会被其他元素占据*/

         .fixed{

             background-color:yellow;

             position:fixed;

             left:50px;

         }

         /*相对定位、绝对定位、fixed定位的元素，它们的z-index都比页面正常元素的z-index大*/

     </style>

 <link rel="stylesheet" href="1.css" />

 </head>

 <body>

     <div class="relative">relative div</div>

     <div style="width:200px;height:200px;background-color:black;"></div>

     <br/>

     <div class="absolute">absolute div</div>

     <div style="width:200px;height:200px;background-color:black;"></div>

 <br/>

      <div class="fixed">fix div</div>

      <div style="width:200px;height:200px;background-color:black;"></div>

 </body>

 </html>
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>固定在浏览器窗口位置的广告位演示</title>

     <style>

         body{background:#DB9395;height:1200px;}

         .AD{

             position: fixed;    /*fixed绝对定位是以浏览器窗口为参照对象*/

             right:0;

             bottom:0;

         }

         .AD{position:absolute;right:0;bottom:0;}/*absolute绝对定位是以body标签为参照对象*/

     </style>

 </head>

 <body>

     <div class="AD">

         <img src="./htk.png"  alt="">

     </div>

 </body>

 </html>

　　　　

【CSS】定位层的更多相关文章

  1. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

  4. 常用的CSS定位，XPath定位和JPath定位

    CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...

  5. CSS 定位

    一.CSS 定位和浮动   它们代替了多年来的表格布局.   定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置.   浮动在 CSS1 中被首次提出.浮动不完全是定位, ...

  6. Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析

    加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

  7. CSS定位小技巧

    CSS定位Static 默认定位Relative 相对定位:left 和topposition: relative;/*相对定位*/ left:40px;/*在原来的位置向右移动*/ top:100p ...

  8. div+css遮罩层

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...

  9. (七)CSS定位(Positioning)

    CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...

随机推荐

  1. SQLAlchemy 关联表删除实验

    本实验所用代码来源于官网文档 from sqlalchemy import Table, Column, Integer, String, ForeignKey from sqlalchemy.orm ...

  2. 【SP1812】LCS2 - Longest Common Substring II

    [SP1812]LCS2 - Longest Common Substring II 题面 洛谷 题解 你首先得会做这题. 然后就其实就很简单了, 你在每一个状态\(i\)打一个标记\(f[i]\)表 ...

  3. HTML基础之DOM操作

    DOM(Document Object Model 文档对象模型) 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通过dom对象中j ...

  4. scala学习——（1）scala基础（上）

    scala> val x = 1 x: Int = 1 一.值与变量 值(val):赋值后不可变 val值名称:类型 = XXX 变量(var):赋值后可以改变  var变量名称:类型 = XX ...

  5. js中的数据类型及判断方法

    ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型. 基本类型 ● Boolean ● Null ● Undefined ● Number ● String ● Symbol (ECM ...

  6. servelt filter listener 的生命周期

    1. servlet    当第一次请求一个servlet资源时,servlet容器创建这个servlet实例,并调用他的 init(ServletConfig config)做一些初始化的工作,然后 ...

  7. HTML表单与输入实例

    解释HTML 表单用于搜集不同类型的用户输入.HTML 表单包含表单元素.表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等.<input> 元素<input ...

  8. JMeter采用NON GUI模式时如何记录并查看错误

    在GUI模式下执行JMeter测试时,我们可以通过添加View Results Tree组件来查看JMeter请求的各类详情.那如果在正式测试场景中,当我们采用NON GUI模式时,遇到了断言或其他错 ...

  9. Alpha版本项目展示得分

    团队名称 得分 newbe 80 C705 100 ourteam 60 sevens 50 sixsix 190 dxteam 75 hots 200 Echo 90

  10. 《Linux内核分析》课程第四周学习总结

    姓名:何伟钦 学号:20135223 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...