WEB前端 | HTML基础——(4)定位position

来源：互联网发布：天猫国际官方直营知乎编辑：程序博客网时间：2024/06/03 20:12
<!doctype html><html><head><meta charset="utf-8"/><title>定位</title><style type="text/css">body {height: 3000px;}.div {width: 200px;height: 200px;}.div1 {width: 600px;height: 600px;background-color: red;}.div2 {width: 400px;height: 400px;background-color: yellow;position: relative;top: 100px;left: 100px;/*static 默认值relative 相对定位，相对于自身，没有脱离文档流，自身所占空间还在，只是位置发生了改变fixed    固定定位，固定在窗口某一个位置一般可以做广告位，做返回顶部的按钮absolute 绝对定位，相对于带有position属性的父(父..)级来定位                 如果父级都没有position属性，则相对于窗口(不是body)的左上角来定位设置position属性之后，必须设置相应的top、left、bottom属性才能去定位*//*position: relative;top: 50px;left: 100px;*//*position: fixed;*/}.div3 {background-color: green;position: absolute;top: 100px;left: 100px;z-index: 10;}</style></head><body><div class="div1 div"><div class="div2 div">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div<div class="div3 div"></div></div></div> </body></html>
1 0