在CSSposition属性中,absolute和relative的结合使用是非常重要的东西。因为网页设计时用absolute和relative的相结合非常便利。
首先看relative,相对定位,在菜鸟教程上的解释是:相对定位元素的定位是相对其正常位置。而absolute,绝对定位,在菜鸟教程上的解释是:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。 基础部分就不说了,主要他两的结合使用,在网页设计时,你可以对第一个元素进行相对定位relative,而第二个用absolute绝对定位,作为一个子级,而relative作为一个父级存在。很明显的例子就是CSS轮播图的制作:
1<html> 2 <head> 3 <meta charset="utf-8" /> 4 5 <title>#</title> 6<style> 7#rela{ 8 9 height: 450px; 10 11 width: 800px; 12 13 margin: 0; 14 15 position: relative; 16 17 overflow: hidden; 18 19} 20 21 22 23.abos{ 24 width: 800px; 25 26 height: 2300px; 27 28 position: absolute; 29 30 top: 0; 31 32 left: 0; 33 34 35} 36 37</style> 38</head> 39<body> 40 <div id=resa"> 41 <div class="abso"> 42 <a href="#.html"> <img src=#" alt="#" width="800px" height="450px"/></a> 43 <a href="#.html"><img src="#" alt="#" width="800px" height="450px"/></a> 44 <a href="#.html"><img src="#" alt="#" width="800px" height="450px"/></a> 45 <a href="#.html"><img src="#" alt="#" width="800px" height="450px"/></a> 46 <a href="#.html" ><img src="#" alt="#" width="800px" height="450px"/></a> 47 48 49 </div> 50 </div> 51</body> 52</html>
以上的结果就是,abso元素会绝对定位在rela元素中,并且超出部分会被overflow隐藏,并且不会影响到abso。