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. Nginx日常报错处理总结

    在Nginx错误日志中,有大量的下列信息: Upstream timed out (110: Connection timed out) while reading response header f ...

  2. 微信小程序之地理位置授权 wx.getLocation

    1. 授权地理位置 点击按钮,弹出授权弹窗,点击允许后,在以后的操作中可以随时获取到用户地理位置 点击拒绝后,将无法获取到地理位置,也无法再次点击弹出弹窗. <button bindtap='o ...

  3. [CF1038F]Wrap Around[AC自动机+dp]

    题意 题目链接 分析 题意容易转化成求循环之后不包含 \(s\) 的串的个数. 首先建立 AC 自动机.考虑一个暴力的做法:枚举长度为 \(n\) 的字符串 \(t\) 最终(后缀) 和 \(s\) ...

  4. Visual Studio Package 插件开发(Visual Studio SDK)

    背景 这段时间公司新做了一个支付系统,里面有N个后台服务,每次有更新修改,拷贝打包发布包“不亦乐乎”...于是我想要不要自己定制个打包插件. 部分朋友可能会认为,有现成的可以去找一个,干嘛不用持续集成 ...

  5. 使用Memcached提高.NET应用程序的性能（转）

    标签:分布式缓存 .NET Memcached Performance 性能 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://zh ...

  6. EntityFramework Core 2.x （ef core） 在迁移中自动生成数据库表和列说明

    在项目开发中有没有用过拼音首字母做列名或者接手这样的项目? 看见xmspsqb(项目审批申请表)这种表名时是否有一种无法抑制的想肛了取名的老兄的冲动? 更坑爹的是这种数据库没有文档(或者文档老旧不堪早 ...

  7. 初入Installshield2015

    首先我们来认识一下这款软件:这是一款功能强大的软件打包工具,有着许多强大的功能等着我们去发掘,博主也是最近被这个东西搞得有点晕头, 现在就想让读者朋友们更快的接受这个软件. 这个软件需要的破解工具,大 ...

  8. Jenkins邮件通知

    Jenkins邮件通知 Jenkins 配备了一个开箱工具,添加一个电子邮件通知的构建项目. 第1步 - 配置SMTP服务器. 转到 Manage Jenkins → Configure System ...

  9. 【SE】Week3 : 个人博客作业（必应词典）

    关于 微软必应词典客户端 的案例分析 [第一部分]  调研,评测 一.用户采访 1)   介绍采访对象的背景和需求: 被采访同学是马来西亚华裔叶能端同学,由于此前在马来西亚英语是第二语言,因此经常需要 ...

  10. akm

    队名--牛肉面不要牛肉不要面 队伍成员 211406285 林志松 [队长兼前端开发] 211606368 林书浩 [系统设计] 211606357 陈远军 [UI美工] 211606335 吴沂章 ...