relative：相對定位。 1. 不論其父元素和相鄰元素的position是什麼，均相對於自身原來的位置來偏移。 2. 不會脫離文檔流，其原來的位置依然保留著，不會被文檔中其他的元素占用。 3. 原來是行內元素，設置相對定位後，依然是行內元素。 4. 設置了相對定位的塊級元素，如果沒有設置寬度，其 ...
relative：相對定位。 1. 不論其父元素和相鄰元素的position是什麼，均相對於自身原來的位置來偏移。 2. 不會脫離文檔流，其原來的位置依然保留著，不會被文檔中其他的元素占用。 3. 原來是行內元素，設置相對定位後，依然是行內元素。 4. 設置了相對定位的塊級元素，如果沒有設置寬度，其寬度依然是拉伸至父元素寬度的100%。 下麵是demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>相對定位</title> </head> <style> .A { background: yellow; height: 100PX; width: 100PX; } .B { background: red; height: 100PX; width: 100PX; position: relative; top: 20PX; margin-top: 20PX; margin-bottom: 20px; /* 相當於以前的位置先向20px;在top原來的位置20px; */ /* bottom: ; */ } .C { background:green; height: 100PX; width: 100PX; } span{ position: relative; top: 50px; } input{ width: 20px; height: 30px; } span{ position: relative; width: 100px; height: 100px; background: red; /* 行內元素不會影響寬高 */ } </style> <body> <!-- 相對定位就是相當於自己以前在標準流中的位置來移動 不會脫離自己的標準流，自己的位置不變 position:relative; top:20px; left:20px; 相對定位應用場景 用於對元素進行微調 配合後面的學習的絕對定位來使用 --> <div class="A"></div> <div class="B"></div> <div class="C"></div> <input type="text" class="D"> <span>輸入</span> </body> </html>
李南江老師視頻筆記
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>絕對定位</title> </head> <style> div { height: 100px; width: 100px; } .A { background: red; } .B { background: green; position: absolute; /* right: 0; */ /* /* top: 0; */ bottom: 0; /* 脫離流元素，相對於body的位置 */ } .C { background: blue; } span { position: absolute; width: 100px; height: 100px; background: yellow; /* 行內元素不會影響寬高 */ } </style> <body> <div class="A"></div> <div class="B"></div> <div class="C"></div> <!-- <span>我是span</span> --> </body> </html>
子絕父相
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> /* 如果用相對定位則不居中，如果使用絕對定位是按當前屏幕決定位置，會隨屏大小移動 */ *{margin: 0; padding: 0; } ul{ list-style: none; height: 50px; width: 700px; margin: 0 auto; margin-top: 100px; } ul li{ float: left; text-align: center; width: 100px; line-height: 50px; background: RGB(184,184,184); } ul li:nth-of-type(4){ position: relative; background: #aad; } ul li img{ position: absolute; top: -13px; left: 42px; } </style> <body> <ul> <li>京東時尚</li> <li>美妝館</li> <li>超市</li> <li>生鮮 <img src="./images/FAQa.gif" alt=""> </li> <li>閃購</li> <li>拍賣</li> <li>金融</li> </ul> </body> </html>
