绝对定位absolute
子绝父相
<style>.box0{border: 1px solid;width: 402px;height: 402px;padding: 100px;margin: 0px auto;}.box1{border: 1px solid;width: 300px;height: 300px;padding: 50px;margin: 0px auto;}.box2{border: 1px solid;width: 98px;height: 98px;padding: 50px;margin: 0px auto;}p{width: 50px;height: 50px;background-color: orange;}</style></head> <body><div class="box0"><div class="box1"><div class="box2"><p></p></div></div></div>
盒子居中
堆叠顺序z-index
cursor光标
轮播图carousel
<style>*{margin: 0px;padding: 0px;}.carousel {width: 650px;height: 360px;border: 1px solid;margin: 40px auto;position: relative;}.carousel .btn{position: absolute;width: 40px;height: 40px;border: 1px solid;margin: 40px auto;top: 50%;margin-top: -20px;border-radius: 50%; /* 文字水平居中 */text-align: center;/* 文字垂直剧中:行高h = height */line-height: 40px;background-color: rgba(255, 255, 255, .5);/* 光标：手指 */cursor: pointer;font-family: consolas;font-size: 26px;}.carousel .btn:hover{background-color: orange;color: white;}.carousel .left{left: 10px;}.carousel .right{right: 10px;}.imgg{width: 650px;/* height: 150px; */}.carousel ol{position: absolute;width: 120px;height: 20px;right: 20px;bottom: 20px;background-color: red;list-style: none;}.carousel ol li{float: left;width: 20px;height: 20px;background-color: rgba(255, 255, 255, .5);border-radius: 50%;margin-right: 10px;}/* li.current 之间不能有空格 */.carousel ol li.current{background-color: gold;}</style></head> <body><div class="carousel"><img src="images/img2.JPG" class="imgg"><!-- 转义字符< > --><a class="left btn"><</a><a class="right btn">></a><ol><li></li><li class="current"></li><li></li><li></li></ol></div><body>
固定定位
position: relative相对定位 ； absolute绝对定位 子绝父相 盒子居中 堆叠顺序z-index cursor光标 hover悬停 轮播图 固定定位fixed
