层在页面中的定位

msn877763580

浏览: 83759 次
性别:

最近访客更多访客>>

猫232323

大智若雨

zxc53200

woaimumuoyoy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

层（div）的定位在Web开发中，有着很重要的位置。主要用到的Css属性有：

　　　　 position:absolute; 
        width:100px; 
        height:100px; 
        background:CornflowerBlue; 
        left:100%; 
        top:50%; 
        margin-left:-100px; 
        margin-top:-50px;

下面是不同位置的参考实现方式：分为东、南、西、北、中、东南、东北、西南、西北。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>positioning</title>
<style type="text/css">
    *
    {
        margin:0px;
        padding:0px;
    }
    .center
    {
        position:absolute;
        width:100px;
        height:100px;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;
        background:DeepSkyBlue;
    }
    .east
    {
        position:absolute;
        width:100px;
        height:100px;
        background:CornflowerBlue;
        left:100%;
        top:50%;
        margin-left:-100px;
        margin-top:-50px;
    }
    .west
    {
        position:absolute;
        width:100px;
        height:100px;
        background:Olive;
        left:0;
        top:50%;
        margin-left:0;
        margin-top:-50px;
    }
    .north
    {
        position:absolute;
        width:100px;
        height:100px;
        background:MediumPurple;
        left:50%;
        top:0;
        margin-left:-50px;
        margin-top:0;
    }
    .south
    {
        position:absolute;
        width:100px;
        height:100px;
        background:LightCoral;
        left:50%;
        top:100%;
        margin-left:-50px;
        margin-top:-100px;
    }
    .westNorth
    {
        position:absolute;
        width:100px;
        height:100px;
        background:Violet;
    }
    .westSouth
    {
        position:absolute;    
        width:100px;
        height:100px;
        background:CadetBlue;
        top:100%;
        margin-top:-100px;
    }
    .eastNorth
    {
        position:absolute;
        width:100px;
        height:100px;
        background:Tomato;
        left:100%;
        margin-left:-100px;
    }
    .eastSouth
    {
        position:absolute;
        width:100px;
        height:100px;
        background:orange;
        left:100%;
        top:100%;
        margin-top:-100px;
        margin-left:-100px;
    }
</style>
</head>

<body>
    <div class="center">center</div>
    <div class="east">east</div>
    <div class="west">west</div>
    <div class="north">north</div>
    <div class="south">south</div>
    <div class="westNorth">westNorth</div>
    <div class="westSouth">westSouth</div>
    <div class="eastNorth">eastNorth</div>
    <div class="eastSouth">eastSouth</div>
</body>
</html>

效果如下：