<!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>
原标题:css position
关键词:CSS