我们可以使用css的position属性来设置元素的定位类型, postion的设置项如下
relative：生成相对定位元素，所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。absolute： 生成绝对定位元素，元素脱离文档流，不占据文档流的位置,可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位,如果找不到，则相对于body元素进行定位。fixed： 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。static：默认值,没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。inherit： 从父元素继承position属性的值。定位元素的偏移
定位的元素还需要用left、right. top或者bottom来设置相对于参照元素的偏移值。相对定位
left：相对于左边向右偏移XXpxtop：相对于顶部向下偏移XXpx绝对定位
left：上一个设置定位的父级元素相对于左边向右偏移XXpx，如果没有父级元素定位，则相对于body偏移top：上一个设置定位的父级元素相对于顶部向下偏移XXpx，如果没有父级元素定位，则相对于body偏移定位元素层级
位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级定位元素的特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素（不设置宽高，大小由内容决定）绝对定位和固定定位后，该元素margin:50px auto 0 无法水平居中，因为auto失效，其他仍可用margin-left <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <style type="text/css"> .con{ width: 400px; height: 400px; border: 1px solid black; margin: 50px auto 0; /*position: relative; 父级定位*/ } .box01,.box02,.box03{ width: 300px; height: 100px; margin: 10px; } .box01{ background-color: green; position: relative; /*相对定位*/ left: 50px; /*相对于左边向右偏移50px*/ top: 50px; /*相对于顶部向下偏移50px*/ } .box02{ background-color: gold; position: absolute; /*绝对定位*/ /*父级元素.con没有设置定位，则相对于body进行偏移*/ left: 50px; /*相对于body向右偏移50px*/ top: 50px; /*相对于body向下偏移50px*/ } .box03{ background-color: blue; position: fixed; /*固定定位*/ left: 100px; /*相对于浏览器窗口向右偏移100px*/ top: 100px; /*相对于浏览器窗口向下偏移100px*/ } </style> </head> <body> <div class="con"> <div class="box01"></div> <div class="box02"></div> <div class="box03"></div> </div> </body> </html>相对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位层级关系</title> <style type="text/css"> .con{ width: 400px; height: 400px; border: 1px solid #000; margin: 50px auto 0; position: relative; /*设定绝对定位的参照点*/ } /*定义四个div元素的大小和绝对定位元素属性*/ .con div{ width: 200px; height: 200px; position: absolute; } .box01{ background-color: green; left: 20px; /*相对父级元素.con位置相对于左边向右偏移20px*/ top: 20px; /*相对父级元素.con位置相对于上边向下偏移20px*/ z-index: 10; /*设置层级为10 = 置顶，默认层级＜10*/ } .box02{ background-color: gold; left: 40px; top: 40px; } .box03{ background-color: blue; left: 60px; top: 60px; } .box04{ background-color: pink; left: 80px; top: 80px; } </style> </head> <body> <div class="con"> <div class="box01"></div> <div class="box02"></div> <div class="box03"></div> <div class="box04"></div> </div> </body> </html>定位实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位实例</title> <style type="text/css"> .con{ width: 100px; height: 100px; background-color: gold; margin: 50px auto 0; position: relative; border-radius: 14px; /*半径14的圆角，除非半径50才能成圆*/ } .box{ width: 28px; height: 28px; background-color: red; color: white; text-align: center; line-height: 28px; position: absolute; right: -14px; top: -14px; border-radius: 14px; /*半径14的圆*/ } </style> </head> <body> <div class='con'> <div class="box">5</div> </div> </body> </html>定位元素的特性，定位居中、弹窗实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位实例</title> <style type="text/css"> .con{ width: 960px; height: 80px; background-color: gold; /*margin: 50px auto 0; auto水平居中失效*/ position: fixed; /*固定定位，当前屏幕*/ /*水平居中*/ top: 0px; left: 50%; /*偏移浏览器的一半位置*/ margin-left: -480px; /*再偏移父元素一半宽度*/ }/*锁定父元素，下拉不消失*/ p{ text-align: center; } .popup{ width: 500px; height: 300px; border: 1px solid #000; background-color: #fff; position: fixed; /*固定定位，当前屏幕*/ left: 50%; margin-left: -251px; /*水平居中*/ top: 50%; margin-top: -151px; /*垂直居中*/ z-index: 9999 /*置于最前面*/ } .popup h2{ background-color: gold; margin: 10px; height: 40px; } .mask{ position: fixed; width: 100%; height: 100%; background-color: #000; left: 0px; top: 0px; opacity: 0.5; /*透明度50%*/ z-index: 9998; } .pop_con{ display: none; /*隐藏*/ display: block; /*显示*/ } </style> </head> <body> <div class='con'>1111</div> <div class="pop_con"> <div class="popup"> <h2>弹窗标题</h2> </div> <div class="mask"></div> </div> <p>网页文字</p> <br /> <br /> <br /> <br /> <br /> <br /> <p>网页文字</p> <br /> <br /> <br /> <br /> <br /> <br /> <p>网页文字</p> <br /> <br /> <br /> <br /> <br /> <br /> <p>网页文字</p> <br /> <br /> <br /> <br /> <br /> <br /> <p>网页文字</p> <br /> <br /> <br /> <br /> <br /> <br /> <p>网页文字</p> <br /> <br /> <br /> <br /> <br /> <br /> <p>网页文字</p> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html>
