13-[CSS]-postion位置：相relative，绝absolute，固fixed，static（默认）,z-index
1、postion位置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
/*如果对当前元素仅仅设置相对定位，那么与标准流下的盒子没有什么区别*/
position: relative;
/*设置相对定位 我们就可以使用四个方向的属性 top left right bottom 相对定位：相对于自己原来的本身定位 top:20px; 那么盒子相对于原来的位置向下移动。相对定位仅仅的微调我们元素的位置
*/
top: 20px;
left: 30px;
}
</style>
</head>
<body> <!-- 定位有三种： 1.相对定位 2.绝对定位 3.固定定位
这三种定位，每种定位都暗藏玄机，所以我们要一一单讲 position:relative;
position:absolute;
position:fixed; --> <div class="box1"></div> </body>
</html>
2、相对定位relative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px; }
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative;
top: 50px;
left: 100px;
}
.box3{
background-color: blue;
} </style>
</head>
<body> <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div> </body>
</html>
（2）相对定位有bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接美化</title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li.xiaoming{
position: relative;
top: 40px;
left: 30px;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外，不继承父元素的color*/ .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
</style>
</head>
<body> <div class="nav">
<ul>
<li>
<a href="">网站导航</a>
</li>
<li class="xiaoming">
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
</ul>
</div>
</body>
</html>
（3）微调元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin: 100px;
}
.user{
font-size: 25px;
}
.btn{
position: relative;
top: 3px;
left: -5px;
} </style>
</head>
<body>
<!-- 微调我们元素位置--> <div> <input type="text" name="username" class="user">
<input type="button" name="" value="点我" class="btn">
</div> </body>
</html>
3、绝对定位absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px; }
.box1{
background-color: red; position: absolute;
top:10px;
left:10px;
}
.box2{
background-color: green; }
.box3{
background-color: blue;
}
span{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
} </style>
</head>
<body> <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>文字</span> </body>
</html>
（1）绝对定位参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
width: 100%;
height: 2000px;
border: 10px solid green;
} .box{
width: 200px;
height: 200px;
background-color: red; position: absolute;
bottom: 100px;
left: 18px;
}
</style>
</head>
<body>
<div class="box"> </div> </body>
</html>
（2）以父辈当做参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px; /*父盒子设置相对定位*/
position: relative;
padding: 50px;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
position: relative; } .box p{
width: 100px;
height: 100px;
background-color: pink;
/*子元素设置了绝对定位*/
position: absolute;
top: 0;
left: 0;
} </style>
</head>
<body>
<div class="box"> <div class="box2">
<p></p>
</div>
</div> </body>
</html>
（3）父相子绝，父绝子绝，父固子绝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父盒子设置相对定位*/
position: absolute;
padding: 50px;
} .box p{
width: 100px;
height: 100px;
background-color: pink;
/*子元素设置了绝对定位*/
position: absolute;
top: 10px;
left: 20px;
} </style>
</head>
<body> <div class="box"> <p></p> </div> </body>
</html>
（4）绝对定位的盒子无视父辈的 padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
margin: 100px;
border: 10px solid red;
position: relative;
padding: 50px;
}
.father p{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 10px;
left: 40px;
}
</style>
</head>
<body>
<div class="father">
<p></p>
</div> </body>
</html>
（5）绝对定位盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: relative;
left: 50%;
margin-left: -480px; /*设置绝对定位之后，margin:0 auto;不起任何作用，
如果想让绝对定位的盒子居中。当做公式记下来
设置子元素绝对定位，
然后left:50%;
margin-left等于元素宽度的一半，
实现绝对定位盒子居中*/
} </style>
</head>
<body>
<div class="box">
<div class="c"></div>
</div> </body>
</html>
4、fixed固定属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
p{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
bottom: 30px;
right: 40px;
}
</style>
</head>
<body> <div>
<p></p>
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt=""> </div>
</body>
</html>
（1）返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
p{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
bottom: 30px;
right: 40px;
line-height: 100px;
font-size: 20px;
text-align: center;
color: #fff;
}
</style>
</head>
<body> <div>
<p>返回顶部</p>
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt=""> </div> <script src="./js/jquery-3.2.1.min.js"></script>
<script type='text/javascript'> // 这下面的代码后面咱们会讲，大家不用在这个初学阶段去纠结下面的代码。
$(function(){
$('p').click(function(){ $('html').animate({
"scrollTop":0
},2000)
})
})
</script>
</body>
</html>
5、z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> *{
padding: 0;
margin: 0 }
.box1{
width: 200px;
height: 200px;
background-color: red;
position:relative;
top: 30px;
left: 40px;
z-index: 3;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
top: 0;
left: 0;
z-index: 2;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
float: left;
margin-left: 20px;
margin-top: -30px; }
</style>
</head>
<body> <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div> </body>
</html>
（1）从父现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0
}
.tianliang{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 3; }
.tianliang .sendie{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 240px;
left: 300px;
z-index: 333; }
.lzy{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
z-index: 4;
}
.lzy .brother{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 100px;
left: 320px;
z-index: 111; }
</style>
</head>
<body> <div class="tianliang">
<p class="sendie"></p>
</div>
<div class="lzy">
<p class="brother"></p>
</div>
</body>
</html>
（2）固定导航栏加9999
4
5
13-[CSS]-postion位置：相relative，绝absolute，固fixed，static（默认）,z-index的更多相关文章
- [转]关于position 的 static、relative、absolute、fixed、inherit
本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...
- position的static、relative、absolute、fixed、inherit
网上有很多关于position的讲解,也有很多他们属性之间的比较,但是比较全面的讲解还是比较少,每次看完过段时间就忘了,所以今天参考了很多网上现有的资源,自己整理一下,写下这篇文章. position ...
- position 有五个值：static、relative、absolute、fixed、inherit。
position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...
- [转]Html position（static、relative、absolute、fixed）
转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.a ...
- 前端~定位属性position（relative、absolute、fixed）的分析
前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...
- css中的position:relative和absolute 属性
语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...
- python全栈开发day41-background、精灵图技术、定位（相、绝、固）、z-index
一.昨日内容回顾 1.标准文档流定义: https://www.jianshu.com/p/b4d2c1dfd6e5 2.浮动和浮动的四大特性 1)脱标 2) 浮动元素相互贴靠 3)字围 4)紧凑(浮 ...
- css案例学习之relative与absolute
代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- css备忘录（关于relative、absolute）
父级用:position: relative; 子级才能用:position: absolute; relative里面用margin调位置: absolute里面用top.left.right.bo ...
- CSS之定位，relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
随机推荐
- Oracle EBS 请求添加SQL语句
- MsSQL使用加密连接SSL/TLS
说明 应用程序通过未加密的通道与数据库服务器通信, 这可能会造成重大的安全风险.在这种情况下, 攻击者可以修改用户输入的数据, 甚至对数据库服务器执行任意 SQL 命令. 例如,当您使用以下连接字符串 ...
- MySQL Flashback 工具介绍
MySQL Flashback 工具介绍 DML Flashback 独立工具,通过伪装成slave拉取binlog来进行处理 MyFlash 「大众点点评」 binlog2sql 「大众点评(上海) ...
- [翻译] OrigamiEngine
OrigamiEngine https://github.com/ap4y/OrigamiEngine Lightweight iOS and OSX audio engine with opus, ...
- windows server 2016部署服务
绪论 有时候,如果安装系统数量比较多,而且数量较多,人工使用U盘或者光盘安装,效率较低,通过网络可以批量安装. 还可以做到无人安装. PXE PXE(preboot execute env ...
- libc.so.6: cannot open shared object file: No such file or diretory
环境 centos6.6. 由于误操作 删除了 rm -f /lib64/libc.so.6 导致其他命令不能使用 解决方法: /sbin/sln /lib64/libc-
- Logstash和Flume-NG Syslog接收小测试
目前在大规模日志处理平台中常见的日志采集器可以采用Logstash或Flume.这两种日志采集器架构设计理念基本相似,都采用采集-过滤处理-输出的方式.下面对这两种采集器Syslog接收性能做个简单测 ...
- SOA面向服务架构——SOA的概念
SOA的概念是Gartner 在1996年提出来的,并于2002年12月进一步提出SOA是“现代应用开发领域最重要的课题”. 一.SOA的定义 SOA分为广义的SOA和狭义的SOA,广义的SOA是 ...
- NCE3
Lesson1 A puma at large Pumas are large, cat-like animals which are found in America. When reports ...
- libcurl同时下载多个文件
#include <errno.h> #include <stdlib.h> #include <string.h> #ifndef WIN32 #include ...