html中的定位与层级设置
#转载请先留言联系
定位
HTML中的position属性可以对元素进行定位，通过position的不同的值，可以配合方位属性，让元素显示页面中的任何一个位置。
position有四个值：
static，默认值，去除元素的定位。也就是不进行定位
relative，相对定位，元素相对于自身原来的位置进行定位。
absolute，绝对定位，元素相对于当前父元素进行定位。
fixed，固定定位，元素相对于浏览器页面窗口进行定位。
怎么定位？css中提供了四个不同方位属性给我们进行定位。
top：表示距离顶部指定的长度
bottom:表示距离底部指定的长度
left：表示距离左边指定的长度
right：表示距离右边指定的长度
示例：
1.relative定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:200px;
height: 200px;
background: #000;
position: relative;
/*让元素相对于自身原有的位置进行定位*/
top:100px; /*向下移动100px*/
left: 100px; /*向左移动100px*/
/*定位中，left与right,top与bottom一般不同时使用*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>;
2.absolute定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
background: blue;
position: absolute;
top: 100px;
left: 100px;
}
.son{
width: 100px;
height: 100px;
background: black;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
absolute定位有一个很常用的用途，就是当希望子元素在父元素的正中央时，可以这样操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
background: blue;
position: absolute;
top: 100px;
left: 100px;
}
.son{
width: 100px;
height: 100px;
background: black;
position: absolute;
left: 0; /* 注意不要漏了上下左右为0，否则不会成功 */
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
3.fixed定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one{
width: 100px;
height: 300px;
background: blue;
position: fixed;
right: 0;
top: 300px;
}
.two{
width: 100px;
height: 300px;
background: blue;
position: fixed;
left: 0;
top: 300px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
设置了定位后可以设置层级。
层级
通过z-index进行设置，所有的元素的z-index默认值为0，我们可以通过z-index，设置不同的值来控制定位元素之间的覆盖。值越大的，层级越高，值越小，层级就越低，如果定位元素的层级为-1，则会被普通没有定位的元素进行覆盖。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one{
width: 100px;
height: 200px;
background: red;
position: absolute;
}
.two{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
z-index: 1;
}
.three{
width: 100px;
height: 300px;
background: blue;
position: absolute;
z-index: -2;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
html中的定位与层级设置的更多相关文章
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)
物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载) 2015年11月14日| by: nbboy| Category: 系统设计, 缓存设计, 高性能系统 摘要 ...
- angularjs中的页面访问权限设置
11月在赶一个项目,这阵子比较忙,挤挤时间更一篇博客吧,如标题所述说说在ng中页面访问权限控制的问题,水平有限各位看官见谅: 在以往的项目中,前后端常见的配合方式是前端提供页面和ui加一点DuangD ...
- jQuery ZeroClipboard中Flash定位不准确的解决方案
转自波斯马,原文地址<jQuery ZeroClipboard中Flash定位不准确的解决方案> jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE.Fire ...
- css中的定位
上一篇博客,我大概介绍了下浮动的使用及行为.其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当. 一.定位分类: a.静态定位 position:static; ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
- MySQL 5.7中如何定位DDL被阻塞的问题
在上篇文章<MySQL表结构变更,不可不知的Metadata Lock>中,我们介绍了MDL引入的背景,及基本概念,从“道”的层面知道了什么是MDL.下面就从“术”的层面看看如何定位MDL ...
- 【基础】selenium中元素定位的常用方法（三）
一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单, ...
随机推荐
- Elicpse新建userLibrary导入jar包时抛出NotFoundException异常
最近刚开始学Struts2.0框架.再导入jar包的时候突然心血来潮.为方便区分jar包的功能,于是想在WEB-INF -> lib 目录下想新建一个struts文件夹,以方便分类查看. 像上图 ...
- ASP.NET程序中设置相对路径的方法
如图所示,这是个绝对路径. 改为相对路径的方法是:AppDomain.CurrentDomain.BaseDirectory. 如下图所示:
- microtime()
PHP函数microtime()返回当前 Unix 时间戳和微秒数.
- input标签与label标签的“合作关系”
一直忽略了input和label的关系.一次在做自定义单选框的时候又重新捡起来这对“兄弟”. label的for属性和input的id值一致的话,input和label就会组成一个组.例如: < ...
- JAXB使用方式
JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生Java类的技术.该过程中,JAXB也提供了将XML实例文档反向 ...
- 解决jQuery load()加载GB2312页面时出现乱码
jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. 这是jQueryAJAX.html <!DOCTYPE html PUBLIC "-// ...
- [CF735D]Taxes
题目大意:给你$n$,把它分成若干个数$n_i$,记价值为$\sum_{i=1}^k(\sum_{j|n_i}j-n_i)$(即分成的每个数的约数和(不包括自身)).(以前写的题,不知道为什么没交) ...
- [洛谷P1317]低洼地
题目大意:一组数,分别表示地平线的高度变化.高度值为整数,相邻高度用直线连接.找出并统计有多少个可能积水的低洼地?(首尾都为0) 题解:求出其中都多少个不严格下降子段和不严格上升子段所夹的位置,即为答 ...
- [51nod1482]部落信号 单调栈
~~~题面~~~ 题解: 可以发现这是一道单调栈的题目,首先来考虑数字没有重复时如何统计贡献. 因为这是一个环,而如果我们从最高的点把环断开,并把最高点放在链的最后面(顺时针移动),那么因为在最高点两 ...
- 你试过不用if写代码吗？
我在教新手编程时,喜欢给他们一些小小的挑战,比如:不使用if语句(或者三元运算符.switch语句等)解决一些编程问题.这样做有什么意义吗?事实上,它可以迫使你从不同的角度寻找解决方法,也许可以找到更 ...