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 其中前六种都比较简单, ...
随机推荐
- MyBatis整体了解
背景资料 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBati ...
- To Chromium之浏览器外框UI
先不去管那些webkit,V8 engine, Parser, security,IPC... 先来看看Chromium的外框UI是那些code负责的,如果自己可以定制化一下,应该蛮好玩的. TBD. ...
- php array_merge和“+”的区别和使用《细说php2》
php array_merge和“+”的区别和使用
- [C/C++] extern关键字详解以及与static、const区别
extern用法详解: 1. 声明外部实体 声明外部全局变量或对象,一般用于头文件中,表示在其它编译单元内定义的变量,链接时进行外部链接,如: extern int ivalue; 此时的extern ...
- servlet 接受和回复向服务器对客户端发起得请求
servlet 接受和回复向服务器对客户端发起得请求
- [AHOI2013]作业 & Gty的二逼妹子序列 莫队
---题面--- 题解: 题目要求统计一个区间内数值在[a, b]内的数的个数和种数,而这个是可以用树状数组统计出来的,所以可以考虑莫队. 考虑区间[l, r]转移到[l, r + 1],那么对于维护 ...
- display:inline-block带来的问题及解决办法
在日常工作中,会经常遇到两个或多个元素并排排列的效果,以前会使用float等实现,float虽然方便好用,但是需要清除浮动,有时会带来意想不到的bug 而且在移动端是不推荐使用float的,所以使用d ...
- [NOIP2003] 传染病控制 搜索+剪枝
搜索的最广泛应用优化——剪枝 这道题的dp和贪心都是无正确性的,所以,搜~~~~~~~ 搜的时候你发现不剪枝极容易被卡掉(然而良心NOIP没有这么做,不剪枝仍然飞快),所以我们需要一些玄学的剪枝最常见 ...
- How to turn off the binary log for mysqld_multi instances?
Q: MySQL supports running multiple mysqld on the same server. One of the ways is to use mysqld_multi ...
- hdu 3473 （划分树）2
Minimum Sum Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...