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 其中前六种都比较简单, ...
随机推荐
- 【转】cocos2dx 3.x 集成protobuf
http://www.cnblogs.com/chevin/p/6001872.html vs2013+cocos2dx 3.13.1 这篇博文是集成Lua版本的protobuf,集成C++版本的过程 ...
- 关于for循环的理解
个人理解:for循环,顾名思义,就是在每种特定条件下,按照要求执行每个阶段,也指着在某种情况下的赋值,反反复复的根据 编程来输入.当在一些特定条件下,程序中的数值也会发生相应的改变,这就得看执行的口令 ...
- WebService使用介绍(二)
Soap soap是什么 SOAP 是一种网络通信协议 SOAP即Simple Object Access Protocol简易对象访问协议 SOAP 用于跨平台应用程序之间的通信 SOAP 被设计用 ...
- 对于response.setContentType(MIME)的解释
response.setContentType(MIME)的作用是使客户端浏览器,区分不同种类的数据,并根据不同的MIME调用浏览器内不同的程序嵌入模块来处理相应的数据.例如web浏览器就是通过MIM ...
- 子查询 做where条件 做 from的临时表 ，做select的一个字段 等
子查询 做where条件 做 from的临时表 ,做select的一个字段 等
- Firefox浏览器浏览自己做的网站需要输入用户名和密码解决
我用最新的Firefox 35.0浏览我制作的网站,就会弹出这个对话框.这是什么原因?
- P3032 [USACO11NOV]二进制数独Binary Sudoku
题目描述 Farmer John's cows like to play an interesting variant of the popular game of "Sudoku" ...
- C++——类继承以及类初始化顺序
对于类以及类继承, 几个主要的问题:1) 继承方式: public/protected/private继承. 这是c++搞的, 实际上继承方式是一种允许子类控制的思想. 子类通过public继承, 可 ...
- 无人值守安装linux系统
需要使用到的服务:PXE + DHCP+TFTP+ Kickstart+ FTP KickStart是一种无人职守安装方式 执行 PXE + KickStart安装需要准备内容: • DHCP 服务 ...
- JS让任意图片垂直水平居中且页面不滚动
说一下以前遇到的一个问题: 假设有一张小图,要实现点击查看大图的功能,而这个图的宽高可能会超过浏览器的宽高,这时候我们通过JS来改变图片的宽高,从而实现图片在浏览器居中显示且不滚屏. 方法如下: 首先 ...