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是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
随机推荐
- centos7上安装 mysql
centos7上的安装是和其他的版本不一样的 ,因为centos上的安装与centos的操作是不通了的 在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装 ...
- 关于UIScrollView有些你很难知晓的崩溃情形
关于UIScrollView有些你很难知晓的崩溃情形 为了实现以下的功能(按钮之间的切换效果): 简短的代码如下: // // RootViewController.m // BUG // // Co ...
- WDS使用捕获映像制作企业自定义映像
来源:http://www.07net01.com/linux/WDSshiyongbuhuoyingxiangzhizuoqiyezidingyiyingxiang_545749_137448761 ...
- zabbix日常监控项nginx（五）
1.开启nginx监控 2.编写脚本来进行数据采集 3.设置用户自定义参数 4.重启zabbix-agent 5.添加item.创建图形.创建触发器 6.创建模板 注:第一次使用可以按需求制定好模板, ...
- 一个最简单的WebSocket hello world demo
服务器端代码不超过42行: const WSServer = require("./server.js"); var counter = 0; function createWeb ...
- Memcahce和Redis比较
一.Memcache 1． memecache 把数据全部存在内存之中,断电后会挂掉,数据不能超过内存大小redis有部份存在硬盘上,这样能保证数据的持久性. 2． Memcache ...
- 【原创】Apache ab出现 apr_pollset_poll: The timeout specified has expired 错误
使用如下参数可避免 -s timeout Seconds to max. wait for each response Default is 30 seconds -k Use HTTP KeepAl ...
- 【node.js】readline (逐行读取)
官网链接:http://nodejs.cn/api/readline#readline_readline require('readline') 模块提供了一个接口,用于从可读流(如 process. ...
- 20145203盖泽双 《Java程序设计》第十周学习总结
20145203盖泽双 <Java程序设计>第十周学习总结 教材学习内容总结 一.网络概述 1.网络编程就是两个或多个设备(程序)之间的数据交换. 2.识别网络上的每个设备:①IP地址②域 ...
- Python pip常用指令
pip listpip list --outdatedpip list --outdated | grep Jinja2pip uninstall pycurlpip show pycurlpip i ...