CSS定位

定位

其中，绝对定位和固定定位会脱离文档流

设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom

相对定位

温馨提示

设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

Z-index

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

定位实操-下拉列表效果

<div class="nav"><ul><li><a href="#">首页</a><div class="nav-list" style="background-color: red;"></div></li><li><a href="#">手机</a><div class="nav-list" style="background-color:green;"></div></li><li><a href="#">配件</a><div class="nav-list" style="background-color:orange"></div></li><li><a href="#">服务</a><div class="nav-list" style="background-color:yellow"></div></li><li><a href="#">下载</a><div class="nav-list" style="background-color:teal"></div></li><li><a href="#">amigoOS</a><div class="nav-list" style="background-color:darkorchid"></div></li></ul>
</div>

.nav {width: 100%;height: 61px;position: relative;
}
.nav li {list-style: none;float: left;padding: 20px 26px;
}
.nav a {color: #000;text-decoration: none;
}
.nav-list {width: 100%;height: 300px;background-color: red;position: absolute;left: 0;top: 100%;display: none;
}
.nav li:hover>.nav-list {display: block;
}

定位实操-图片上面定位文字

<div class="container"><ul><li><a href="#"><img src="./1.png" alt=""><div class="text"><span class="name">魅族 18</span><span class="desc">限时领券至高立省1000 | 12期免息</span><span class="price"><i>￥</i>3999<em>起</em></span></div><span class="product-sign red">免息</span></a></li><li><a href="#"><img src="./2.png" alt=""><div class="text"><span class="name">魅族 18s Pro</span><span class="desc">限时领券至高立省1000 | 12期免息</span><span class="price"><i>￥</i>4599<em>起</em></span></div><span class="product-sign">免息</span></a></li><li><a href="#"><img src="./2.png" alt=""><div class="text"><span class="name">魅族 18s Pro</span><span class="desc">限时领券至高立省1000 | 12期免息</span><span class="price"><i>￥</i>4599<em>起</em></span></div><span class="product-sign">免息</span></a></li><li><a href="#"><img src="./2.png" alt=""><div class="text"><span class="name">魅族 18s Pro</span><span class="desc">限时领券至高立省1000 | 12期免息</span><span class="price"><i>￥</i>4599<em>起</em></span></div><span class="product-sign">免息</span></a></li></ul>
</div>

* {margin: 0;padding: 0;
}
body {background-color: #f1f1f1;
}
.container {width: 1240px;margin: auto;
}
.container ul{clear: both;overflow: hidden;
}
.container ul li {list-style: none;float: left;position: relative;width: 303px;height: 375px;margin-right: 9px;margin-top: 10px;background-color: #fff;
}
.container ul li:nth-child(4n){margin-right: 0;
}
.container ul li a {display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;
}
.container ul li a img {height: 230px;margin-top: 30px;
}
.text .name {display: block;color: #333;font-size: 16px;margin-bottom: 2px;
}
.text .desc {display: block;color: #999;font-size: 14px;
}
.text .price {display: inline-block;color: #c00;font-size: 22px;padding-left: 14px;
}
.text .price i {font-style: normal;font-size: 14px;bottom: 3px;
}
.text .price em {font-size: 16px;font-style: normal;
}
.product-sign {position: absolute;top: 30px;left: 30px;display: block;width: 60px;height: 60px;line-height: 60px;color: #fff;font-size: 16px;text-align: center;border-radius: 50%;background-color: #ff64a6;
}

定位实操-照片墙

<div class="container"><img class="img1" src="https://www.itbaizhan.com/wiki/images/1.jpeg" alt="美女"><img class="img2" src="https://www.itbaizhan.com/wiki/images/2.jpeg" alt="美女"><img class="img3" src="https://www.itbaizhan.com/wiki/images/3.jpeg" alt="美女"><img class="img4" src="https://www.itbaizhan.com/wiki/images/4.jpeg" alt="美女"><img class="img5" src="https://www.itbaizhan.com/wiki/images/5.jpeg" alt="美女"><img class="img6" src="https://www.itbaizhan.com/wiki/images/6.webp" alt="美女"><img class="img7" src="https://www.itbaizhan.com/wiki/images/7.jpeg" alt="美女"><img class="img8" src="https://www.itbaizhan.com/wiki/images/8.jpg" alt="美女"><img class="img9" src="https://www.itbaizhan.com/wiki/images/9.jpeg" alt="美女"><img class="img10" src="https://www.itbaizhan.com/wiki/images/10.jpeg" alt="美女">
</div>
.container{width: 960px;height: 600px;/* background-color: red; */margin: 0 auto;position: relative;
}
.container img{width: 200px;border: 10px solid #f1f1f1;position: absolute;
}
.img1{transform: rotate(10deg);top: 0;left: 375px;
}
.img2{transform: rotate(-10deg);top: 20px;left: 200px;
}
.img3{transform: rotate(-20deg);top: 40px;left: 700px;
}
.img4{transform: rotate(-5deg);top: 30px;left: 500px;
}
.img5{transform: rotate(20deg);top: 50px;left: 10px;
}
.img6{transform: rotate(-5deg);top: 160px;left: 350px;
}
.img7{transform: rotate(-5deg);top: 300px;left: 0px;
}
.img8{transform: rotate(5deg);top: 270px;left: 180px;
}
.img9{transform: rotate(-10deg);top: 290px;left: 370px;
}
.img10{transform: rotate(20deg);top: 280px;left: 600px;
}