层定位layer
一、实现层定位的方法
position属性实现层定位，把元素分出层次形成一种嵌套关系，而嵌套在里面的元素则称之为子层，外面包裹的元素称为父层。
position属性属性规定定位的方式(相对于谁进行定位)，position的取值有以下四个：
- static 默认值，元素出现在正常流中，没有层定位（left，right，top，bottom，z-index无效)
- fixed 固定定位，元素框偏移一定位置，形状不变且原来所占空间被保留，不被其他元素占据。属于层定位的方式，相对于浏览器窗口进行定位，（left，right，top，bottom，z-index有效)
- relative 相对定位，属于层定位的方式，相对于直接父元素进行定位(left，right，top，bottom，z-index有效)
- absolute 绝对定位 ，元素脱离正常的文档流，其原有位置不会被保留，会被其他元素占据，元素在定位之后无论原来属于什么类型元素都会变成一个块元素。 相对于static定位以外的第一个父元素(left，right，top，bottom，z-index有效)
二、相对定位
position:relative（不继承）
相对定位：每个元素在页面的文档流中都有一个自然位置，。相对于这个原始位置对元素进行移动就称之为相对定位（针对浏览器所做的定位）
定位为reltive的元素脱离正常的文档流，元素仍然保留未定位前的形状，在正常的文档流中原来的位置会被保留，不会被占据。
参照物：是直接父元素，不管直接父元素是怎么样的定位方式
注意：、想对元素使用相对定位，既要指明采用相对定位，还要给出偏移量。取值可以为正数也可以是负数。使用em会使偏移量的大小与文字字体的大小成正比。1em等于当前字体尺寸，2em等于当前字体尺寸的二倍。
2、其他元素不会受到偏移的影响，仍按照这个元素原来的盒子进行排列。设置相对定位的内容是否与其他内容重叠，取决top,left,right,bottom的值。
3、对元素设置position:static，可以覆盖position:relative的设置。static是元素默认值，默认文档流。
代码
效果图片：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框
固定定位 position:fixed
不会随着浏览器窗口滚动条的滚动而移动位置，页面的其余部分仍然照常滚动。（在很多移动浏览器效果不佳）
坐标原点始终在参照物的左上角(0.0)
三、绝对定位
position:absolute （不继承）
绝对定位：网页中的元素通常是按照在HTML代码中出现的先后顺序进行的排列，除非使用css改变其样式，通过对元素设置浮动定位，可以改变元素出现的顺序。绝对定位设置为子元素
定位为absolute的元素脱离正常的文档流，但是他在正常文档流中的位置不会被保留，会被其它static元素所替代。
参照物：相对于其最近的，定位为absolute或是relative的父层。而这个父层并不一定是直接父层。如果其父层都未定位absolute或是relative，则其将相对于body来定位，通常都会将相对定位和绝对定位结合起来应用，相对定位设置为父元素，把绝对定位设置成子元素。
注意：、绝对定位的元素脱离了文档流，因此可能会发生相互重叠或是与其他元素重叠（并不一定是坏事）；如果不为绝对定位的元素设置偏移量，这个元素将显示在它的原来的文档流的位置上，但是不会影响后续元素在文档流中的位置；
2、对元素设置position:static，可以覆盖position:relative设置。static是元素默认值，默认文档流；
3、使用相对定位绝对定位或是固定定位时，可以使用z-index属性指定相互重叠的元素的堆叠次序。
代码图片：
效果图片：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素
四、元素重叠
z-index:n
使用相对定位，绝对定位，和固定定位之后，有可能会出现元素相互重叠的现象，这时候就可以利用z-index属性设置哪些元素应该出现在上层。对于定位元素，z-index值最高的在最上面，取值最小的在最下面。
在栈中定位元素，输入z-index：n（n表示元素定位过的对象堆中的层级的数字。n越大元素元素堆的越高）
注意：z-index属性仅对定位过的元素（设置过绝对、相对、固定定位的元素有效），可以对绝对定位、相对定位、固定定位的元素混合使用z-index，z-index会将他们做整体安排，而不是分别安排。
- z-index取值大的会在上面
- z-index取值小的会在下面
如果想把一个图片设置为背景图，可以把z-index的取值设置的非常小，比如说-999
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
border:1px solid;
position:absolute;
}
.box1{
background: pink;
width:140px;
height:140px;
z-index: -10;
}
.box2{
background: orange;
width:120px;
height:120px;
z-index: 10;
}
.box3{
background: red;
width:100px;
height:100px;
z-index: 20;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
层定位layer的更多相关文章
- 弹层组件-layer
layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...
- CSS层定位——固定定位，相对定位，绝对定位
主要写关于层定位的相关知识 ㈠定位概述 ⑴像图像软件中的图层一样可以对每一个layer能够精确定位操作 ⑵层定位的position属性决定了当前的一个网页元素,可以叠加到另一个网页元素上面,那么我们把 ...
- CGI servlet Applet Scriptlet Scriptlet JSP data layer(数据层),business layer(业务层), presentation layer(表现层)
https://en.wikipedia.org/wiki/Common_Gateway_Interface In computing, Common Gateway Interface (CGI) ...
- Layui 弹出层组件——layer的模块化开发实例应用
Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...
- 前端学习笔记--CSS布局--层定位
1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...
- keras模块学习之层（layer）的使用-笔记
本笔记由博客园-圆柱模板 博主整理笔记发布,转载需注明,谢谢合作! keras的层主要包括: 常用层(Core).卷积层(Convolutional).池化层(Pooling).局部连接层.递归层(R ...
- 传输层-Transport Layer（上）：传输层的功能、三次握手与四次握手、最大-最小公平、AIMD加法递增乘法递减
第六章 传输层-Transport Layer(上) 6.1传输层概述 在之前的几章内容中,我们自底向上的描述了计算机网络的各个层次,还描述了一些处于不同层次下的经典网络协议(如以太网.无线局域网.或 ...
- 传输层-Transport Layer（下）：UDP与TCP报头解析、TCP滑动窗口、TCP拥塞控制详解
第六章 传输层-Transport Layer(下) 上一篇文章对传输层的寻址方式.功能.以及流量控制方法做了简短的介绍,这一部分将介绍传输层最重要的两个实例:TCP协议和UDP协议,看一看之前描述的 ...
- jQuery
代码的层定位滑动动画效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- delphi : 窗体的close,free,destroy
一.我用application.create(TForm2,Form2)语句,创建了Form2,可是调用了Form2.close后,重新调用Form2.show. 刚才所创建的Form2仍然存在.问为 ...
- 2019暑假第三周（HDFS和HBase）
Hadoop的核心是HDFS和MapReduce. 1.分布式文件系统HDFS理论方面的认知学习. 2.HDFS编程实践. 3.分布式数据库HBase.
- jmeter常用性能监听器分析
jmeter中提供了很多性能数据的监听器,我们通过监听器可以来分析性能瓶颈 本文以500线程的阶梯加压测试结果来描述图表. 常用监听器 1:Transactions per Second 监听动态TP ...
- python每日一练：0005题
第 0005 题: 你有一个目录,装了很多照片,把它们的尺寸变成都不大于 iPhone5 分辨率的大小. import cv2 import os def resize(path,sizeX,size ...
- 【Linux开发】OpenCV在ARM-linux上的移植过程遇到的问题1---cvNamedWindow调用报错的问题
问题描述: 这个实际上是最后一部的问题,将生成的共享库文件放入到了/usr/local/opencv-arm/lib下,并且设置了LD_LIBRARY_PATH中为/usr/local/opencv- ...
- 【Qt开发】 V4L2_CAP_VIDEO_OVERLAY与V4L2_CAP_VIDEO_CAPTURE的区别
原文地址http://www.cnblogs.com/tlm1992/archive/2012/06/12/2545772.html 这部分spec的内容没有全看懂,但是根据FSL的代码能知道这其中的 ...
- <<用法
数据移位运算符,左移几位,如:x=i<<4;就是将i的值左移4位(放大2的4次方)后,赋给x,若i=2,则X=32.
- linux修改用户最大线程数
linux下普通用户最大允许使用线程数为1024: 但是并发量大时,该1024配置项远远不够满足我们的需要,我们可以修改/etc/security/limits.d/90-nproc.conf配置设置 ...
- C++中的数组操作符重载
1,本文讲述数组操作符重载,上篇博文的字符串类 string 确实强大,但 string 类 对象还具备 C 方式字符串的灵活性吗?还能直接访问单个字符吗? 1,C 方式字符串灵活性是指能够通过数组 ...
- 4-2如何判断字符串a是否以字符串b开头或结尾
1.相关介绍 1.1修改文件权限和查看文件权限 在windows平台实验时 os.chmod()无法将文件权限修改为可执行,暂不深究如何实现.在linux平台进行测试. (1)创建三个文件 pytho ...