时间戳

首页 > 技术文章 > CSS定位

CSS定位

lipeng0824 2015-04-05 16:58 原文

1：CSS定位

 　　

　　position：

  • absolute    绝对布局  不占位置 而且margin左右设为auto没用 
  • realtive      相对布局  占位置   margin左右设为auto有用
  • fixed          不占位置   但是会固定在浏览器的一个位置 而且margin左右设为auto没用     前三个都可以使用偏移量
  • static  其他属性z-index 偏移量会没用
 <style type="text/css">
     #div1{
         height: 100px;
         width: 500px;
         background-color: blue;
         position: fixed;
         border-radius: 20px;
         z-index: 2;
   }
     #div2{
         height: 100px;
         width: 500px;
         left: 50px;
         top: 50px;
         background-color: red;
         position: fixed;
         border-radius: 20px;
         z-index: 0;
   }
     #div3{
         height: 100px;
         width: 500px;
         left: 100px;
         top: 80px;
         background-color: yellow;
         position: fixed;
         border-radius: 20px;
         z-index: 1;
     }

    </style>
CSS
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
    for(var i = 0;i < 100 ;i++ ){
        document.write(i + "<br />");}
</script>
HTML

效果：

 

 2：CSS浮动

　　

<div id="continer">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    LIPENGLIPENGLIPENG
</div>
HTNL
  <style type="text/css">
     #div1{
         height: 100px;
         width: 50px;
         background-color: blue;
         border-radius: 20px;
         float: left;
   }
     #div2{
         height: 100px;
         width: 100px;
         background-color: red;
         border-radius: 20px;
         float: left;
   }
     #div3{
         height: 100px;
         width: 100px;
         background-color: yellow;
         border-radius: 20px;
         float: left;
     }
    #continer{
        height: 300px;
        width: 240px;
        background-color:gray;
        border-radius: 20px;
        float: left;
    }
    </style>
CSS

 效果：

 

3：浮动的应用

    <style type="text/css">
     #div1{
         height: auto;
         width: 500px;
         margin: 100px auto;
    }
    li {
        list-style: none;
}
    ul{
        width: 25px;
        float: left;
     }
    </style>
CSS
<div id="div1">
    <ul>
        <li><img src="img/1.jpg" title="1"></li>
        <li><img src="img/2.jpg"  title="2"></li>
        <li><img src="img/3.jpg"></li>
    </ul>
    <ul>
        <li><img src="img/4.jpg"></li>
        <li><img src="img/5.jpg"></li>
        <li><img src="img/6.jpg"></li>
    </ul>
    <ul>
        <li><img src="img/7.jpg"></li>
        <li><img src="img/8.jpg"></li>
        <li><img src="img/9.jpg"></li>
    </ul>
</div>
HTML

 

推荐阅读