定位总结

2024-04-27 15:15:44

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定位总结</title> <style type="text/CSS"> .box1{width: 500px;height: 300px;background: red;border: 1px solid red;} .box2{margin: 30px; width: 300px;height: 200px;background: blue;position: relative;} .box3{width:100px; height: 100px;background: green;position: absolute;top: 0;left: 0;} .box4{width: 200px;height: 200px;background: yellow;position: fixed;right: 0;bottom: 0;line-height: 200px;text-align: center;} /* 相对定位 position:relative; 1.不影响元素本身的特性 2.不使元素脱离文档流 3.如果没有定位偏移量，对元素本身没有任何影响 4.定位元素位置控制 top/right/bottom/left 定位元素偏移量绝对定位 position:absolute; 1.使元素完全脱离文档流 2.使内嵌支持宽高 3.块属性标签内容撑开宽度 4.绝对定位元素的参照物是：离它最近的且设置了position值为absolute/relative/fixed之一的先祖元素，如果没有这样的先祖元素作为参照物，其默认参照物为文档（即浏览器的可视区域） 5.相对定位一般都是配合绝对定位使用固定定位 position:fixed；与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；问题：IE6不支持固定定位； */ </style></head><body> <div class="box1"> <div class="box2"> <div class="box3">box3</div> </div> </div> <div class="box4">固定定位</div></body>

上一篇：页脚，无论内容是否满屏页脚均在底部

下一篇：Windows系统下将ionic项目打包成apk文件的方法