1.Positioned Layout Module
提供与元素定位和层叠相关功能 它是核心模块
.box {
position:relative;
}
2.作用
(1)盒子模型的类型和尺寸
(2)布局模型
(3)元素之间的关系
(4)视口大小、图像大小等其他相关方面
1.position之static
静态定位/常规定位/自然定位——定位中的一股清流-回归本真
|
作用 |
使元素定位于常规/自然流中 (块、行垂直排列下去、行内水平从左到右) |
|
特点 |
(1)忽略top, bottom, left, right或者z-index声明 (2)两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的 (3)具有固定width和height值的元素，如果把左右外边距设置为auto ,则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .book{ position: static; top: 10px; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 2px solid blue; box-sizing: border-box; } .book:nth-child(1){ border:2px solid green; /*margin: 30px;*/ margin-left: auto; margin-right: auto; } .book:nth-child(2){ border:2px solid red; /*margin: 20px;*/ } </style> </head> <body> <div class="book">A</div> <div class="book">B</div> <div class="book">C</div> <div class="book">D</div> </body> </html>
2.position之relative
相对定位
|
作用 |
使元素成为containing-block-官话是可定位的祖先元素 |
|
特点
|
(1)可以使用top/right/bottom/left/z-index进行相对定位——?相对的是谁 (2)相对定位的元素不会离开常规流——心念 家乡 (3)任何元素都可以设置为relative,它的绝对定位的后代都可以相对于它进行绝对定位——超好用 (4)可以使浮动元素发生偏移，并控制它们的堆叠顺序 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .block{ position: relative; top: 0; left: 0; width: 80px; height: 80px; line-height: 80px; border: 2px solid black; text-align: center; float: left; } .block:nth-child(2){ border:2px solid red; position: relative; top: 10px; left:-8px; float: left; } </style> </head> <body> <div class="block">A</div> <div class="block">B</div> <div class="block">C</div> </body> </html>
3.position之absolute
绝对定位
|
作用 |
使元素脱离常规流 |
|
特点 |
(1)脱离常规流 (2)设置尺寸要注意:百分比比的是谁?—— 最近定位祖先元素 (3)Irtb如果设置为0它将对齐到最近定位祖先元素的各边——衍生出一个居中妙计 (4)Irtb如果设置为auto它将被打回原形 (5)如果没有最近定位祖先元素会认<body>做爹爹 (6)z-index可以控制堆叠顺序999999见过吧? |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .block{ width: 80px; height: 80px; line-height: 80px; text-align: center; border: 2px solid black; } /*.block:nth-child(1){ position: absolute; top: 20px; left: 20px; border-color: blue; z-index: 999999; }*/ .block:nth-child(2){ position: absolute; top: 20px; left: 20px; width: 50%; height: 50%; border-color: red; z-index: 1; } </style> </head> <body> <div class="block">A</div> <div class="block">B</div> <div class="block">C</div> </body> </html>
4.position之fixed
固定定位
|
作用 |
我跟绝对定位本是同根生相煎何太急 |
|
特点 |
(1)跟absolute有啥区别?相对于谁做绝对定位 (2)固定定位元素不会随着视口滚动而滚动 (3)继承absolute特点 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ height: 800px; background-color: red; } .block{ width: 80px; height: 80px; line-height: 80px; border: 2px solid black; text-align: center; } .block:nth-child(1){ position: absolute; top: 10px; left: 20px; } .block:nth-child(2){ position: fixed; top: 10px; left: 20px; } </style> </head> <body> <div class="block">绝对定位</div> <div class="block">固定定位</div> </body> </html>
5.position之sticky
磁贴定位/粘性定位/吸附定位——赛季新秀实力布局糖
|
作用 |
relavtive + fixed的完美结合，制造出吸附效果 |
|
特点 |
(1)如果产生偏移原位置还是会在常规流中，一亩三分地留着 (2)如果它的最近祖先元素有滚动那么它的偏移标尺就是最近祖先元素 (3)如果最近祖先元素没有滚动那么它的偏移标尺是视口 (4)上下左右的偏移规则 |
原文：https://www.cnblogs.com/Sweetsnow/p/13485519.html
