css的定位笔记
程序员文章站
2022-06-30 12:10:51
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>
李南江老师视频笔记
absolute:绝对定位。
1. 相对于最近的一个position不为static的父元素来定位,如果没有,则相对于html来定位,注意:此处网上很多资料说是相对于body来定位,下文会进行验证。
2. 设置了绝对定位的行内元素,会转化为块级元素,可以设置宽高。
3. 设置了绝对定位的块级元素,如果没有设置固定宽度,则其宽度不会自动拉伸至父元素的100%,而是由内容和内边距的宽度来决定的。
<!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>