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. VS新建一个模板工程

    新建一个模板工程的好处:    1.就不用每次都走一边新建向导了,新建工程一步到位. 2.可以往项目中每次都的输入的代码,如一些声明注释-- 效果图: 具体步骤: 1.自己先新建一个属于自己的工程. ...

  2. 汇编 shr 逻辑右移指令,shl 逻辑左移指令,SAL 算术左移指令,SAR 算术右移指令

    知识点: shr 逻辑右移指令 shl 逻辑左移指令 一.SHL 逻辑左移指令测试 shr 逻辑右移指令 右移一位相当于整除2 shl 逻辑左移指令 左移一位相当于乘2 //很多时候会溢出 //& ...

  3. python 回溯法 子集树模板 系列 —— 9、旅行商问题（TSP）

    问题 旅行商问题(Traveling Salesman Problem,TSP)是旅行商要到若干个城市旅行,各城市之间的费用是已知的,为了节省费用,旅行商决定从所在城市出发,到每个城市旅行一次后返回初 ...

  4. Hadoop开发第2期---虚拟机中搭建Linux

    注:关于如何将hadoop源码导入Eclipse详见http://pan.baidu.com/s/1hq8ArUs 一.Hadoop配置软件(我的电脑是Windows7旗舰--64bit) 1. VM ...

  5. shell脚本事例 -- 获取当前日期的前一天日期

    记录一个shell脚本事例,事例中包括shell的一些语法(函数定义.表达式运算.if.case...) #!/bin/sh #获取当前时间 RUN_TIME=`date +%H%M%S` #取当前日 ...

  6. CS299笔记：广义线性模型

    指数分布族 我们称一类分布属于指数分布族(exponential family distribution),如果它的分布函数可以写成以下的形式: \[ \begin{equation} p(y;\et ...

  7. C# Language Specification 5.0 （翻译）第五章 变量

    变量(variable)表示存储的位置.每个变量都有类型,类型决定变量保存的值的类型.C# 是一门类型安全的语言,C# 编译器会确保变量中保存一个适合类型的值.变量的值可通过赋值或通过使用 ++ 与 ...

  8. 记录：tf.saved_model 模块的简单使用（TensorFlow 模型存储与恢复）

    虽然说 TensorFlow 2.0 即将问世,但是有一些模块的内容却是不大变化的.其中就有 tf.saved_model 模块,主要用于模型的存储和恢复.为了防止学习记录文件丢失或者蠢笨的脑子直接遗 ...

  9. 冲刺Two之站立会议1

    今天我们开始了第二个冲刺期的工作,大家重新讨论了下个阶段的工作内容,由于上次演示我们主要只是实现了摄像头开启.通信和语音通话的功能,而且各部分还有待完善.所以我们决定了之后的主要工作的内容:之前服务器 ...

  10. 使用git进行代码的推送

    首先是对于锐捷墙的问题,登陆github有时可以有时又连不上,网络又非常慢,所以用了十足的耐心才fork完了代码库.链接https://github.com/niconiconiconi/hellow ...