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. python 字符串的split()函数详解

    split翻译为分裂.  split()就是将一个字符串分裂成多个字符串组成的列表. split()当不带参数时以空格进行分割,当代参数时,以该参数进行分割. //---当不带参数时 example: ...

  2. RHEL6 最小化系统 编译安装部署zabbix （mysql）

    RHEL6 最小化系统 编译安装部署zabbix (mysql)官方说明详细见:https://www.zabbix.com/documentation/4.0/manual/installation ...

  3. Kubernetes学习之路（二十四）之Prometheus监控

    目录 1.Prometheus概述 2.Prometheus部署 2.1.创建名称空间prom 2.2.部署node_exporter 2.3.部署prometheus-server 2.4.部署ku ...

  4. helloworld讲解cocos2d-x的编程思路与要点

    用helloworld讲解cocos2d-x的编程思路与要点 本文以cocos2d-x的helloworld为例,讲解cocos2d-x引擎的特点和要点,2.2为了展示新功能,把包括屏幕自适应在内的新 ...

  5. vue-cli 3.0 实现A-Z字母滑动选择城市列表

    项目地址: https://github.com/caochangkui/vue-cli3 项目代码: 城市列表首页: City.vue <template> <div id=&qu ...

  6. phpmyadmin连接MySQL服务器被拒绝

    显示: phpMyAdmin 尝试连接到MySQL服务器,但服务器拒绝连接.您应该检查配置文件中的主机.用户名和密码,并确认这些信息与 MySQL 服务器管理员所给出的信息一致. 原因: 可能是修改了 ...

  7. Catlike学习笔记(1.4)-使用Unity构建分形

    又两个星期没写文章了,主要是沉迷 Screeps 这个游戏,真的是太好玩了导致我这两个礼拜 Github 小绿点几乎天天刷.其实想开一个新坑大概把自己写 AI 的心路历程记录下,不过觉得因为要消耗太多 ...

  8. Deferred Shading 延迟着色（翻译）

    原文地址:https://en.wikipedia.org/wiki/Deferred_shading 在3D计算机图形学领域,deferred shading 是一种屏幕空间着色技术.它被称为Def ...

  9. VC++ 屏蔽掉警告

    使用VC6.0在开发程序的时候经常会遇到很多警告,很麻烦,也很耽误时间,可以使用如下方法屏蔽掉警告 在StdAfx.h 中 #define VC_EXTRALEAN 下面增加:#pragma warn ...

  10. Scrum Meeting day 2

              第二次会议,开发人员会议 .  •    前端: 1. 登陆界面,login, sign up, 添加加载时的图片. 2. 主界面:采用类微信类型.应含有联系人.群聊.设置 3. ...