《定 位》
概念：讓元素去某一個位置，位置的改變，去到任意一個你指定的位置
屬性：position
? ? ? ? 取值：
? ? ? ? ? ? ? ?static——————靜態定位，元素正常顯示（默認值）
? ? ? ? ? ? ? ?relative——————相對定位，相對于自己原來的位置進行位置的改變。參照物是自己原來的位置。
? ? ? ? ? ? ? ?absolute——————絕對定位
? ? ? ? ? ? ? ? ? ? 父子關系中：
? ? ? ? ? ? ? ? ? ? ? ? ? 1、如果父元素沒有定位，此時子元素絕對定位，參照物是瀏覽器窗口第一屏幕（保證頁面有滾動條）
? ? ? ? ? ? ? ? ? ? ? ? ? 2、如果父元素有定位，此時子元素絕對定位，子元素位置改變，參照物是父元素。父元素通常使用的定位是相對定位，稱之為父相子絕。父元素只要有定位即可（不是靜態定位就可以）
? ? ? ? ? ? ? ?fixed——————固定定位，參照物就是瀏覽器窗口
? ? ? ? ? ? ? ?sticky——————粘性定位，用來實現吸頂效果，參照物是距離最近的帶有滾動條的容器
位移屬性：
? ? 元素定位后，需要配合位移屬性才能更改元素的位置
? ? ? ? ? ? ? ? ?top/right/bottom/left
? ? ? ? ? ? ?位移屬性取值為正數，向元素正中心方向移動；位移屬性取值為負數，向元素四周發散方向移動。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}ul{list-style: none;}.box{width:1200px;height:600px;border:2px solid gray;margin:0 auto;}.list{width:300px;height:600px;background-color: pink;float: left;/* 添加定位 */position: relative;}.box .rig{width:900px;height:600px;background-color: palegreen;float: left;}.box .list li{height:60px;line-height:60px;text-align: center;border:1px dashed red;box-sizing: border-box;/* 添加定位 *//* position: relative; */}.box .list li div{width:900px;height:600px;/* background-color: cyan; */position: absolute;top:0;left:300px;display: none;}.box .inner1{background-color: cyan;}.box .inner2{background-color: purple;}.box .inner3{background-color: orange;}.box .list li:hover div{display: block;}</style> </head> <body><div class="box"><!-- 左側 --><ul class="list"><li>手機<div class="inner1"></div></li><li>電腦<div class="inner2"></div></li><li>電視<div class="inner3"></div></li><li>耳機</li><li>健康/兒童</li><li>健康/兒童</li><li>健康/兒童</li><li>健康/兒童</li><li>健康/兒童</li><li>健康/兒童</li></ul><!-- 右側 --><div class="rig"></div></div> </body> </html>總結
- 上一篇： Camera2之CameraManage
- 下一篇： 100种思维模型之认知资源思维模型-03