定位
什么是定位:将指定元素摆放到页面的任意位置。
(通过定位可以任意的摆放元素)
通过position属性来定位元素的
相对定位:
当开启元素定位时(position的属性值是一个非static的值)
这个时候,可以通过left、right、top、bottom四个属性来设置元素的偏移量。
left:元素相对于其定位位置的左侧偏移量
right:元素相对于其定位位置的右侧偏移量
top: 元素相对于其定位位置的上侧偏移量
bottom:元素相对于其定位位置的下侧偏移量
相对定位的特点:
1.当开启元素的相对定位以后,如果不设置偏移量,元素不会发生任何变化。
2.相对定位是相对于元素在文档流中原来的位置进行定位的。
3.相对定位的元素不会脱落文档流。
4.相对定位会让元素提升一个层级
练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1, .box2, .box3, .box4{
width: 100px;
height: 100px;
background-color: #bfa;
border: 1px solid red;
}
.box2{
position: relative;
left: 200px;
top: -100px;
}
.box4{
position: relative;
left: 100px;
top: -100px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>
小总结:相对定位其实比较简单,就是通过position:relative;
稍微有难度的地方是偏移量的设置。这个时候需要我们建立坐标的概念。
绝对定位:
当position属性设置为absolute时,则开启了元素的绝对定位
1.开启绝对定位,会使元素脱离文档流。
2.开启绝对定位以后,如果元素不设置偏移量,则元素的位置不会发生改变。
3.绝对定位会使元素提升一个层级。
4.绝对定位是相当于离他最近的开启了定位的祖先元素进行定位的。
如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位。
小练习:
固定定位:
position : fixed;
/*
当元素的position属性设置为fixed时候,则开启了元素的固定定位
固定定位也是一种绝对定位,它的大部分特点和绝对定位一样
不同的是:
固定定位永远是相对于浏览器窗口进行定位的
固定定位会固定在浏览器的某一个位置,不会随滚动条滚动。
*/
2级菜单(多级导航)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
HTML+CSS 完成静态网页的制作
标签 <ul><li>...</li></ul>项目列表
标签<a>链接
float 浮动
display:block;属性
position属性规定元素的定位
-->
<style type="text/css">
*{ margin: 0px; padding: 0px; }
#nav{ background-color: #c5cce5; width: 600px; height: 40px; margin: 50px auto; }
ul{list-style: none}
ul li{float: left;;line-height: 40px;text-align: center;position: relative}
a{ text-decoration: none;color: #0099cc;display: block;padding: 0 10px;}
a:hover{background-color:#99cc00;color: #edcc61}
ul li ul li{ float: none;background-color: #edcc61; margin-top: 2px}
ul li ul{position: absolute; left: 0px;top: 40px;display: none}
ul li ul li a:hover{background-color: #9933cc;}
ul li:hover ul{display: block;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaJqueryJquery</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">js</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">queryJqueryJquery</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">学习中心1</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>