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. 记录一次 @Autowired 无法注入（ spring依赖正常 idea显示有spring已注入的图标）导致空指针异常的原因

    首先,参考 https://blog.csdn.net/weixin_40475523/article/details/81085990 然后发现 是因为我把自己的这个类加上了 @Service 注解 ...

  2. 在 JS 对象中使用 . 和 [] 操作属性的区别

    在 JS 对象中,调用属性一般有两种方法--点和中括号的方法. 例如 使用点方法 var obj = { name: "cedric" } console.log(obj.name ...

  3. Spring+SpringMVC+MyBatis+easyUI整合优化篇（一）Java语言中System.out.print与Log的比较

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 前言 距离上一次更新博客有一段时间了,主要是因为最近有开发任务,另外 ...

  4. 虚拟机console基础环境部署——工作目录准备

    1. 概述2. 相关约定2.1 删除旧文件2.2 创建全局共享文件目录2.3 创建全局软件安装目录2.4 创建数据放置目录3. 总结 1. 概述 上述博客中,已经为console最小化安装了操作系统. ...

  5. postman 断点

  6. telnet协议：简介与安装使用

    Telnet简介 Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.它为用户提供了在本地计算机上完成远程主机工作的能力.在终端使用者的电脑上使用teln ...

  7. Algorithms学习笔记-Chapter0序言

    0.开篇 <Algorithms>源自Berkeley和UCSD课程讲义,由   Sanjoy Dasgupta / Christos H. Papadimitriou / Umesh V ...

  8. 揭秘memset与sizeof的结合使用方法

    memset与sizeof为什么经常结合起来用呢? 一.memset介绍 memset函数是C++中的一个函数,它将从给定地址开始,逐个字节刷内存,初始化它们为给定的参数. 基本用法: void * ...

  9. Alpha阶段个人贡献分

    根据任务完成情况与之前的评分标准,我们给组员分数如下: 团队成员 最终得分 程刚 49 李睿琦 50 刘丽萍 52 刘宇帆 53 王力民 54 杨昊岚 41 左少辉 51 转会人员: 杨昊岚转到Our ...

  10. 20135202闫佳歆--week4 课本第5章学习笔记

    第五章 系统调用 一.与内核通信 系统调用在用户控件进程和硬件设备之间添加了一个中间层,作用如下" 为用户空间提供了一种硬件的抽象接口 系统调用保证了系统的稳定和安全 每个进程都运行在虚拟系 ...