<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>position</title> <style type="text/css"> pre{ font-size: 22px; } b{ font-size: 38px; font-family: "Microsoft Yahei"; } .defaulttext{ color: #666666; font-style: italic; font-weight: bold; } .sample0{ border: 1px dashed red; width: 600px; height: 400px; position: relative; background-color: #1ffeee; } .sample0_child{ position: absolute; /* width: 200px; height: 100px;*/ background-color: red; bottom: 30px; right: 30px; top: 30px; left: 30px; } </style> </head> <body> <pre> position--设置定位方式，设置参照物 top,right,bottom,left,z-index--设置位置，必须配合position使用，如果一个元素不是一个定位元素，设置了这些属性是不起效果的。 上面这两项结合就能定 一个元素在浏览器中的位置 </pre> <br><br> <pre><b>1. top/right/bottom/left 边缘与参照物边缘距离</b>： <span class="defaulttext">默认 top:0,left:0 </span>边缘和参照物边缘的位置， 可以是负值</pre><br> <pre>如果不给子div设置宽高，只设置 position 和left top right bottom 这些边缘间距离值，那么子div 会被撑大</pre> <div class="sample0"> <div class="sample0_child"> </div> </div> <br><br> <style type="text/css"> .zparent{ width: 700px; height: 380px; position: relative; border: 1px dashed #ff0000; font-family: "Microsoft Yahei"; font-size: 40px; } .z01{ text-align: center; line-height: 80px; position: absolute; background-color: blue; color: #ffffff; width: 300px; height: 150px; z-index: 1; top: 50px; left: 50px; } .z02{ text-align: center; line-height: 80px; position: absolute; background-color: red; color: #ffffff; width: 300px; height: 150px; z-index: 2; top: 100px; left: 100px; } .z03{ text-align: center; line-height: 150px; position: absolute; background-color: blue; color: #ffffff; width: 300px; height: 150px; z-index: 3; top: 150px; left: 150px; } </style> <pre><b>2. z-index Z轴</b>，<span class="defaulttext"> 默认值 auto </span>适用于position 非static 元素</pre> <div class="zparent"> <div class="z01">z-index:1</div> <div class="z02">z-index:2</div> <div class="z03">z-index:3</div> </div> <br> <pre> 默认情况下(没有设置z-index属性)，元素会按照文档流中出现的顺序，晚出现的盖在早出现的上面。 是不是z-index值越大的越好呢？不一定，因为z-index还有一个『z-index 栈』的概念</pre><br> <style type="text/css"> .zparent_{ position: relative; width: 400px; height: 200px; border:1px dashed red; margin-top: 10px; font-family: "Microsoft Yahei"; font-size: 22px; } .zchild_{ position: absolute; text-align: center; width: 200px; height: 100px; color: #ffffff; font-size: 22px; line-height: 100px; font-family: "Microsoft Yahei"; } .zparent_1{ z-index: 1; background-color: #baadbd; } .zchild_1{ background-color: red; bottom: 10px; left: 100px; z-index: 1; } .zchild_3{ background-color: gray; bottom: 70px; left: 120px; z-index: 2; } .zparent_2{ z-index: -1; background-color: orange; } .zchild_2{ background-color: #188ddd; top:-50px; left: 150px; z-index: 1; } </style> <div class="zparent_ zparent_1 ">z-index: 1; <div class="zchild_ zchild_1">z-index: 1</div> <div class="zchild_ zchild_3"> z-index: 2</div> </div> <div class="zparent_ zparent_2">z-index: -1; <div class="zchild_ zchild_2 ">z-index : 1</div> </div> <br><br> <pre><b>3. position 位置</b>：position: <span class="defaulttext">static</span>|relative|absolute|fixed </pre> <br> <pre><b>3.1 position:relative </b> 仍在文档流中。 相对定位元素的参照物是 元素本身。 可以改变元素在 Z 轴上的层级。 </pre> <style type="text/css"> .relative{ height: 100px; width: 200px; color: #ffffff; font-size: 22px; font-family: "Microsoft Yahei"; } .relative_0{ background-color: orange; bottom: -50px; left: 50px; position: relative; } .relative_1{ background-color: #ff7b2e; top: 40px; left: 40px; position: relative; } .relative_2{ background-color: orange; } </style> <div class="relative relative_0">position: relative;</div> <div class="relative relative_1">position: relative;</div> <div class="relative relative_2"></div> <br><br> <pre><b>3.2 position:absolute </b> 默认宽度为内容宽度。 脱离文档流。 参照物为第一个定位祖先/根元素。 </pre> <style type="text/css"> .absolute_container{ width: 400px; margin: 200px; line-height: 2; border: 1px dashed #aaa; position: relative; } .absolute_sample{ background-color: pink; position: absolute; bottom: 10px; left: -30px; } </style> <div class="absolute_container"> <div>绝对定位元素的前序元素</div> <div class="absolute_sample">sample</div> <div>绝对定位元素的后序元素</div> </div> <br><br> <pre><b>3.3 position:fixed </b> 默认宽度为内容宽度。 脱离文档流。 参照物为视窗。 <style type="text/css"> .fixed_container{ width: 600px; height: 500px; border: 1px dashed red; color: #ffffff; } .fixsample{ background-color: orange; width: 400px; height: 100px; } .fixed_sample{ position: fixed; bottom: 10px; left: 0; background-color: red; } </style> <div class="fixed_container"> <div class="fixsample">fixed元素的前序元素</div> <div class="fixsample fixed_sample"> position:fixed; bottom: 10px; left: 0; </div> <div class="fixsample ">fixed元素的后序元素</div> </div> </body> </html>
