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 其中前六种都比较简单, ...
随机推荐
- Top K 算法详解
http://xingyunbaijunwei.blog.163.com/blog/static/7653806720111149318357/ 问题描述 百度面试题: ...
- jenkins+Docker持续化部署(笔记）
参考资料:https://www.cnblogs.com/leolztang/p/6934694.html (Jenkins(Docker容器内)使用宿主机的docker命令) https://con ...
- Param指南
param name标签是在这个播放插件中嵌入的一些功能和播放参数: <param name="playcount" value="1"><! ...
- hbase(0.94) get、scan源码分析
简介 本文是需要用到hbase timestamp性质时研究源码所写.内容有一定侧重.且个人理解不算深入,如有错误请不吝指出. 如何看源码 hbase依赖很重,没有独立的client包.所以目前如果在 ...
- 【题解】ZJOI2013蚂蚁寻路
这题强呀……打了10+30暴力之后苦想1h并不会做……于是去看题解.看题解的时候又莫名各种看错,结果看了好久才懂……记录一下血泪史吧. 这题不难发现走出来的图形就是一个高低高低的城堡型图案,命名为高峰 ...
- 【题解】NOIP2016换教室
哇好开心啊!写的时候真的全然对于这个加法没有把握,但还是大着胆子试着写了一下——竟然过了样例?于是又调了一下就过啦. 不过想想也觉得是正确的吧,互相独立的事件对于期望的影响自然也是相互独立的,可以把所 ...
- BZOJ 1030 文本生成器 | 在AC自动机上跑DP
题目: http://www.lydsy.com/JudgeOnline/problem.php?id=1030 题解: 鸽 #include<cstdio> #include<al ...
- yaf学习网站
http://www.01happy.com/php-yaf-ext-business/
- ng双向数据绑定
http://blog.csdn.net/callmekongkong/article/details/54601585
- 用DOM解析XML ，用xpath快速查询XML节点
XPath是一种快速查询xml节点和属性的一种语言,Xpath和xml的关系就像是sql语句和数据库的关系.用sql语句可以从数据库中快速查询出东西同样的用xPath也可以快速的从xml中查询出东西. ...