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是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
随机推荐
- JavaScript大位数相加减
function arrayAdd(number, addNumber) { var numberArr = number.toString().split(''); var addNumberArr ...
- Windows：删除图标缓存
适用于桌面快捷方式图标丢失或图标变成白色的情况,批处理代码如下: rem 关闭explorer.exe taskkill /f /im explorer.exe attrib -h -i %userp ...
- Python成员运算符
Python成员运算符 其他语言没有,是否包含运算符,主要应用在字符串或者集合中 测试实例中包含了一系列的成员,包括字符串,列表或元组. #使用场景01:字符串是否包含另外一个字符串? str01 = ...
- 【教程】【FLEX】#005 拖动
在Flex中,组件的拖动分为: 1. 加强型(即本身就可以拖动设置是否可以拖动的属 [dragEnabled ,dropEnabled ] 即可) 2. 非加强型(可以通过DragManager,Dr ...
- Java 输入输出流总结
1. 运用BufferedInputStream 读取文件流和BufferedOutputStream写文件流: protected static void writeFile2(String inp ...
- 1.4 Installation and Setup（安装和设置）
1.4 Installation and Setup(安装和设置) 这里我们用Anaconda发行版作为Python的使用环境,推荐安装Python3.6,本书就是用Python3.6代码写成的.(译 ...
- 1818: [Cqoi2010]内部白点
Time Limit: 10 Sec Memory Limit: 64 MB Submit: 1394 Solved: 625 [Submit][Status][Discuss] Descriptio ...
- Entity Framework连接MySQL时：由于出现以下异常,无法生成模型:“表“TableDetails”中列“IsPrimaryKey”的值为DBNull.
解决办法一: 1.cmd 2.c:\Users\Administrator>cd c:\Program Files\MySQL\MySQL Server 5.7\bin 3c:\Program ...
- Hive学习之路 （十八）Hive的Shell操作
一.Hive的命令行 1.Hive支持的一些命令 Command Description quit Use quit or exit to leave the interactive shell. s ...
- 【JavaScript】赛码网前端笔试本地环境搭建
参考:https://hoofoo.me/article/2017-04-11/%E8%B5%9B%E7%A0%81%E7%BD%91%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF ...