定位
相对定位
相对定位就是盒子相对对自己原来的位置进行定位，会保留自己原来的位置，其他的盒子会依据这个盒子的原来位置进行布局，而不是相对定位后的位置，也就是说采用相对定位的盒子位置还是原来的位置，只不过渲染是在相对定位的位置。
/* 使用方法*/
position: relative;
left: 60px;
right: 60px;
top: 60px;
bottom: 60px;
A盒子在div中不使用相对定位
.box {
width: 400px;
height: 300px;
margin: 200px auto;
border: 1px solid #000;
}
.boxA {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
left: 20px;
top: 20px;
}
<div class="box">
<div class="boxA">A</div>
</div>
效果：
A盒子在div中使用相对定位：
.box {
width: 400px;
height: 300px;
margin: 200px auto;
border: 1px solid #000;
}
.boxA {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
left: 20px;
top: 20px;
}
效果：
A盒子如果有一个兄弟盒子不使用相对定位：
.box {
width: 400px;
height: 300px;
margin: 200px auto;
border: 1px solid #000;
}
.boxA {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
left: 20px;
top: 20px;
}
.boxB {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 20px;
top: 20px;
}
<div class="box">
<div class="boxA">A</div>
<div class="boxB">B</div>
</div>
效果：
我们可以发现，B盒子的位置并不是根据A盒子相对定位后的位置确定，而是A盒子原来位置下确定B盒子位置。
相对定位的用途
1.相对定位用来微调元素位置。
2.相对定位的元素，可以用作绝对定位的参考盒子。
示例：
<style>
* {
padding: 0;
margin: 0;
}
nav {
width: 960px;
height: 40px;
margin: 40px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
text-align: center;
line-height: 40px;
}
nav ul li a {
display: block;
width: 120px;
height: 40px;
color: white;
background-color: rgb(52, 178, 231);
text-decoration: none;
}
nav ul li a:hover {
border-top: 3px solid rgb(4, 146, 241);
position: relative;
bottom: 3px;
}
</style>
<nav>
<ul>
<li><a href="">内容</a></li>
<li><a href="">内容</a></li>
<li><a href="">内容</a></li>
<li><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>
</nav>
效果：
绝对定位
盒子可以在浏览器中以坐标进行位置精准定位，拥有自己的绝对定位。
绝对定位是脱离文档流的，将释放自己的位置，对其他元素不产生任何干扰，而是对它们进行压盖。
脱离文档流的三种方法
1.浮动
2.绝对定位
3.固定定位
据对定位的位置判定方法：子绝父相，其实也可以为子绝父绝，但是工作基本不用。
当子盒子为绝对定位时，该盒子会以他最近的一个相对定位的祖先盒子为基准。
举例：
祖先盒子没有使用相对定位时，则子盒子的定位基准为浏览器窗口：
<style>
body,ul,p {
padding: 0;
margin: 0;
}
.box1 {
width: 900px;
height: 900px;
margin: 40px auto;
border: 1px solid #000;
}
.box2 {
width: 600px;
height: 600px;
margin: 150px 150px;
border: 1px solid #000;
}
.box3 {
width: 300px;
height: 300px;
margin: 150px 150px;
border: 1px solid #000;
}
p {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}
</style>
<div class="box1">box1
<div class="box2">box2
<div class="box3">box3
<p>p</p>
</div>
</div>
</div>
效果：
祖先盒子设置了相对定位时，子盒子以最近的设置了相对定位的祖先盒子为定位基准：
box3设置了相对定位后
<style>
body,ul,p {
padding: 0;
margin: 0;
}
.box1 {
width: 900px;
height: 900px;
margin: 40px auto;
border: 1px solid #000;
}
.box2 {
width: 600px;
height: 600px;
margin: 150px 150px;
border: 1px solid #000;
}
.box3 {
width: 300px;
height: 300px;
margin: 150px 150px;
border: 1px solid #000;
}
p {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}
</style>
效果：
使用绝对定位实现盒子的
position: absolute;
top: 50%;
margin-top: -自己高度的一般;
利用绝对定位实现盒子的居中，示例：
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
position: relative;
}
.box-child {
width: 40px;
height: 40px;
background-color: orange;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
}
</style>
<div class="box">
<div class="box-child"></div>
</div>
效果：
因为使用了绝对定位，该盒子脱离了标准文档流，不可以使用margin实现水平居中了。
z-index属性
用来决定绝对定位的层叠顺序。
z-index的值越大，层递的级别越高，显示的优先级越高。
绝对定位的用途
- 用来制造“压盖”、“遮罩”的效果。
- 结合css精灵使用。
- 结合js实现动画。
轮播图效果
示例:
<style>
body,ul,p {
margin: 0;
padding: 0;
}
.carousel {
position: relative;
width: 1200px;
height: 425px;
margin: 20px auto;
border: 1px solid #000;
}
.carousel .btn {
text-decoration: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
border: 1px solid #000;
/* 设置为圆形 */
border-radius: 50%;
text-align: center;
line-height: 40px;
background-color: rgba(255,255,255,.5);
/* 悬浮指针为小手状 */
cursor: pointer;
font-family: consolas;
font-size: 30px;
color: #000;
}
.carousel .btn:hover {
background-color: rgb(33, 195, 240);
color: white;
}
.carousel .leftbutton {
left: 10px;
}
.carousel .rightbutton {
right: 10px;
}
.carousel ul {
position: absolute;
width: 140px;
height: 20px;
left: 50%;
margin-left: -55px;
bottom: 20px;
/* background-color: orange; */
list-style: none;
}
.carousel ul li {
float: left;
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, .5);
margin-right: 20px;
/* 变成圆形 */
border-radius: 50%;
}
.carousel ul li:last-child {
margin-right: 0;
}
.carousel ul li.current {
background-color: rgb(33, 195, 240);
}
</style>
<div class="carousel">
<img src="../html5demo/images/93301188_p0_master1200.jpg" alt="">
<a href="#" class="leftbutton btn"><</a>
<a href="#" class="rightbutton btn">></a>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
效果:
固定定位
不管页面如何滚动，它永远都在屏幕固定位置。
固定定位是没有参考元素的，就是说只能依据浏览器定位。
固定定位是脱离标准文档流的。
示例：
<style>
.box_bottom {
position: fixed;
bottom: 20px;
right: 20px;
width: 200px;
height: 200px;
background-color: orange;
}
</style>
<div>
<img src="../html5demo/images/23406063_p0.jpg" alt="">
<img src="../html5demo/images/23406063_p0.jpg" alt="">
<img src="../html5demo/images/23406063_p0.jpg" alt="">
<img src="../html5demo/images/23406063_p0.jpg" alt="">
<img src="../html5demo/images/23406063_p0.jpg" alt="">
<img src="../html5demo/images/23406063_p0.jpg" alt="">
</div>
<div class="box_bottom"></div>
效果：
不管如何滚动页面，右下角的box永远不会改变位置。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
