定位
- 绝对定位absolute：父级没有定位时时，相对文档定位，脱离文档流，提升层级
相对定位relative：
固定定位：fixed：
没有（默认）定位static：
只要有定位，就可以使用扩展样式
left right top bottom
绝对定位（absolute）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
padding: 0px;
margin: 0;
}
div{
width:100px;
height:100px;
}
.box1{
background: #000000;
}
.box2{
background: #0000FF;
position: absolute;
left:100px;
}
.box3{
background:#640045;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
相对定位(relative)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
padding: 0px;
margin: 0;
}
div{
width:100px;
height:100px;
}
.box1{
background: #000000;
}
.box2{
background: #0000FF;
position: relative;
left:100px;
top: 100px;
}
.box3{
background:#640045;
}
</style>
</head>
<body>
<!--
定位
绝对定位absolute：父级没有定位时，相对文档定位，脱离文档流，提升层级
相对定位relative：相对自己定位（参照物是自己），不脱离文档流，提升层次
固定定位fixed：
没有（默认）定位static：
只要有定位，就可以使用扩展样式
left right top bottom
-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
固定定位（fixed）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
}
#aaa{
padding: 50px;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
#nav{
height: 49px;
background: black;
/* 窗口缩小隐藏超出部分 */
overflow: hidden;
white-space: nowrap;
/* 固定定位针对窗口定位，提高文档流，提升层级 */
width: 100%;
position: fixed;
}
#nav .logo a {
font-size: 20px;
font-weight: 900;
color:#68cdba ;
padding:4px 0;
}
#nav .logo{
margin-left: 215px;
}
#nav li {
line-height: 49px;
float: left;
margin-left:24px ;
}
#nav li a{
font-size: 14px;
color:#ffffff ;
padding: 12px 0;
transition:0.3s;
}
#nav li a:hover{
color:#68cdba ;
}
#nav li .zhuce,#nav li .denlu{
border:#68cdba 1px solid;
padding: 2px 5px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="logo"><a href="">Boss直聘</a></li>
<li><a href="">首页</a></li>
<li><a href="">职位</a></li>
<li><a href="">公司</a></li>
<li><a href="">App</a></li>
<li><a href="">咨询</a></li>
<li><a href="">职位</a></li>
<li style="margin-left:200px ;"><a href="">上传简历</a></li>
<li><a href="">我要找工作</a></li>
<li><a href="">我要招聘</a></li>
<li><a class="zhuce" href="">注册</a></li>
<li><a class="denlu"href="">登录</a></li>
</ul>
</div>
<div id="aaa">
阿斯达达大厦大厦大厦
</div>
</body>
</html>
网友评论