标签:ext 参考 text title css html type head 定位
#1 相对定位
以原来的位置为参考点
<!DOCTYPE html> <html> <head> <title>定位</title> <style type="text/css"> body{ border: 1px solid orange; } div{ width: 200px; height: 200px; color:#fff; } div.one{ background-color: red; position: relative; top: 30px; left: 100px; } div.two{ background-color: green; position: relative; top: 100px; } div.three{ background-color: blue; } </style> </head> <body> <!-- position: static 1 相对定位 position: relative; 不脱离标准文档流,可以调整元素; 以原来的位置为参考点 2 绝对定位 position: absolute;
脱离标准文档流;
不在页面上占位置;
压盖现象
根元素页面左上角为参考点
(子元素绝对定位
父元素相对定位)
3 固定定位 position: fixed; --> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> </body> </html>
#2 绝对定位
层级提高; positon: absolute;
# 小米搜索栏
标签:ext 参考 text title css html type head 定位
原文地址:https://www.cnblogs.com/zhujing666/p/12335405.html