定位總結(jié)

2024-04-27 15:15:44

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定位總結(jié)</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;} /* 相對(duì)定位 position:relative; 1.不影響元素本身的特性 2.不使元素脫離文檔流 3.如果沒有定位偏移量，對(duì)元素本身沒有任何影響 4.定位元素位置控制 top/right/bottom/left 定位元素偏移量絕對(duì)定位 position:absolute; 1.使元素完全脫離文檔流 2.使內(nèi)嵌支持寬高 3.塊屬性標(biāo)簽內(nèi)容撐開寬度 4.絕對(duì)定位元素的參照物是：離它最近的且設(shè)置了position值為absolute/relative/fixed之一的先祖元素，如果沒有這樣的先祖元素作為參照物，其默認(rèn)參照物為文檔（即瀏覽器的可視區(qū)域） 5.相對(duì)定位一般都是配合絕對(duì)定位使用固定定位 position:fixed；與絕對(duì)定位的特性基本一致，差別是始終相對(duì)整個(gè)文檔進(jìn)行定位；問題：IE6不支持固定定位； */ </style></head><body> <div class="box1"> <div class="box2"> <div class="box3">box3</div> </div> </div> <div class="box4">固定定位</div></body>

上一篇：頁腳，無論內(nèi)容是否滿屏頁腳均在底部

下一篇：Windows系統(tǒng)下將ionic項(xiàng)目打包成apk文件的方法