你的位置:首页 > 网页设计

[网页设计]css position


<!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>