定位
相对定位: position：relative 是相对于自己当前位置的一个移动。原来的位置依然会被占据。
绝对定位： position:absolute 是相对于设定了定位 的父元素或者是祖先元素定位 （最祖先为浏览器），脱离了正常的文档流，不占据之前的任何空间。
固定定位： position:fixed 是相对于浏览器进行定位。脱离正常 的文档流，不占据任何空间。
另外说一个z-index:设定在同一元素上定位元素，谁的数值越大，谁在越上面，越在前面显示
*****
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 600px; height: 600px; background: palegoldenrod; } .child{ width: 200px; height: 200px; background: yellowgreen; } .c2{ /*相对定位 配合 left、top、right、bottom使用*/ position: relative; left: 100px; top: 100px; /*right: 90px; bottom: 90px*/ } </style> </head> <body> <div class="parent"> <div class="child" style="background: yellow;">1</div> <div class="child c2" style="background: violet;">2</div> <div class="child" style="background: cornflowerblue;">3</div> </div> </body> </html>
*******
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 600px; height: 600px; background: palegoldenrod; display: flex; /*position: relative;*/ } .child{ width: 200px; height: 200px; background: yellowgreen; } .c2{ /*绝对定位 配合 left、top、right、bottom使用*/ position: absolute; left: 100px; top: 250px; /*right: 90px; bottom: 90px*/ } </style> </head> <body> <div class="parent"> <div class="child" style="background: yellow;">1</div> <div class="child c2" style="background: violet;">2</div> <div class="child" style="background: cornflowerblue;">3</div> </div> </body> </html>
********
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 600px; height: 600px; background: palegoldenrod; } .child{ width: 200px; height: 200px; background: yellowgreen; } .c2{ /*固定定位*/ position: fixed; left: 100px; top: 100px; /*right: 90px; bottom: 90px*/ } </style> </head> <body> <div class="parent"> <div class="child" style="background: yellow;">1</div> <div class="child c2" style="background: violet;">2</div> <div class="child" style="background: cornflowerblue;">3</div> <img src="img/bg.jpg"/> <img src="img/left.png"/> <img src="img/right.png"/> </div> </body> </html>
********
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 600px; height: 600px; background: palegoldenrod; display: flex; position: relative; } .child{ width: 200px; height: 200px; background: yellowgreen; } .c1{ /*相对定位 配合 left、top、right、bottom使用*/ position: absolute; left: 50px; top: 50px; /*z-index是z轴的意思，值越大，越在上面，默认是0*/ z-index: 1; } .c2{ /*相对定位 配合 left、top、right、bottom使用*/ position: absolute; left: 90px; top: 90px; z-index: 3; } .c3{ /*相对定位 配合 left、top、right、bottom使用*/ position: absolute; left: 130px; top: 130px; z-index: 2; } </style> </head> <body> <div class="parent"> <div class="child c1" style="background: yellow;">1</div> <div class="child c2" style="background: violet;">2</div> <div class="child c3" style="background: cornflowerblue;">3</div> </div> </body> </html>
