HTML 静态网页制作12月3日格式与布局-优快云博客

本文详细解析了CSS中四种主要定位方式：fixed、absolute、relative及z-index分层的概念，并通过实例展示了它们的具体应用。

一、position：fixed

　　锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。

二、position：absolute

　　1.外层没有position：absolute（或relative）；那么div相对于浏览器定位。

　　2.外层有position：absolute（或relative）；那么div相对于外层边框定位

三、position：relative

　　相对位置。

　　如下图，相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。

四、分层（z-index）

　　在z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。

五、

Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。

源代码如下：

CSS样式表：

<style type="text/css">
*
{
    margin:0px;
    padding:0px;}
#a
{/*position的fixed是针对于浏览器的显示区域的*/
    border:5px solid blue;/*边框宽度，边框样式，边框颜色*/
    width:100px;
    height:100px;
    
    background-color:#0F0;/*div背景颜色*/
    
    position:fixed;}/*div固定在上面两个所规定好的位置*/
#aa
{   border:5px solid blue;/*边框宽度，边框样式，边框颜色*/
    width:100px;
    height:100px;
    
    background-color:#0F0;/*div背景颜色*/
    left:20px;
    top:50px;
    position:relative;
    }    
#b
{
    border:5px solid blue;/*边框宽度，边框样式，边框颜色*/
    width:50px;
    height:50px;
    margin:10px;
    background-color:#0F0;/*div背景颜色*/
    right:50px;
    bottom:50px;
    position:absolute;
    }
#c
{
    border:3px double #FF0000;
    width:400px;
    height:200px;
    }
#d
{
    border:3px double #FF0000;
    width:400px;
    height:200px;
    position:absolute;/*外层上给固定一个position，让里面的bdiv针对ddiv进行位置判定*/
    }        
</style>

<title>无标题文档</title>
<link href="4.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="c">c</div>
<div id="d">d
<div id="b">b</div>
</div>
<div id="a">a</div>
<div id="aa">aa</div>
</body>
</html>