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 其中前六种都比较简单, ...
随机推荐
- Visual Studio各版本工程文件之间的转换 [转载]
原网址:http://www.cnblogs.com/jmliao/p/5594179.html Visual Studio各版本工程文件之间的转换 由于VS版本比较多,低版本无法直接打开高版本的 ...
- DFS（2）——hdu1241Oil Deposits
一.题目回顾 题目链接:Oil Deposits 题意:给你一块网格,网格被分为面积相等的地块,这些地块中标记'@'的是油田,标记'*'的不是油田.已知一块油田与它上下左右以及对角线的油田同属一片油区 ...
- R6的压力测试
VersionCode:{102} VersionName:{1.0.2}
- C# 测试代码的运行时间
使用以下方法可以准确的记录代码运行的耗时. System.Diagnostics.Stopwatch stopwatch = new Stopwatch(); stopwatch.Start(); / ...
- springboot ueditor 使用心得
1.将ueditor引入项目中会发现,图片不能上传,返回值意思是因配置文件错误,导致图片无法上传 默认情况是使用jsp初始配置文件,这就需要项目支持jsp解析 在maven中引入 <!--添加对 ...
- 找jar包的网址
http://search.maven.org/#search%7Cga%7C1%7Cmybatis http://mvnrepository.com/
- Linux 常用命令记录（学习笔记）
不同机器间文件传输(转自:http://www.zhimengzhe.com/mac/323324.html) scp是什么? scp是secure copy的简写,用于在Linux下进行远程拷贝文件 ...
- P1275 魔板
题目描述 有这样一种魔板:它是一个长方形的面板,被划分成n行m列的n*m个方格.每个方格内有一个小灯泡,灯泡的状态有两种(亮或暗).我们可以通过若干操作使魔板从一个状态改变为另一个状态.操作的方式有两 ...
- SRM710 div1 ReverseMancala（trick）
题目大意, 给定一个有n个点的环,n不超过10,每个点上有一个权重 起始时权重将会给出,然后有2种操作 第一种操作是,选择一个位置i,获得权重w = a[i],把a[i]变成0,然后接下来在环上顺着走 ...
- 【题解】Bzoj4316小C的独立集
决定要开始学习圆方树 & 仙人掌相关姿势.加油~~ 其实感觉仙人掌本质上还是一棵树,长得也还挺优美的.很多的想法都可以往树的方面上靠,再针对仙人掌的特性做出改进.这题首先如果是在树上的话那么实 ...