分类：Css Program

Css position:fixed 顶部固定层定位案例

代码：

[cce]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .box1 {
        width: 100px;
        height: 35px;
        background: red;
       /* position: fixed;*/
    }
    .box2 {
        width: 100px;
        height: 35px;
        background: green;
        margin-top: 15px;
    }
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
    
</body>
</html>
[/cce]

在没设置定位前，为两个Box。现设置box1为position:fixed

box1脱离文档流，box2自动占位，box2的外边距自动变为box1的外边距。

如想保持原图不变进行如下设置：

[cce_html]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .box1 {
        width: 100px;
        height: 35px;
        background: red;
        position: fixed;
        top:0;/*设置置顶*/
    }
    .box2 {
        width: 100px;
        height: 50px;
        background: green;
        margin-top: 50px;/*设置外边距是原外边距和box1高度之和*/
    }
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
    
</body>
</html>
[/cce_html]

显示效果：

CSS 布局代码案例

一.单列布局

[cce]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>一列布局</title>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font-size: 30px
    }
    
    div {
        text-align: center;
        font-weight: bold
    }
    
    .main,
    .footer {
        width: 960px;
    }
    
    .head {
        width: 100%;
        height: 100px;
        background: #ccc
    }
    
    .main {
        height: 600px;
        background: #FCC;
        margin:0 auto;
    }
    
    .footer {
        height: 50px;a
        background: #9CF;
        margin:0 auto;
    }
    </style>
</head>

<body>
    <div class="head">head</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>

</html>

[/cce]

二.双列布局

[cce]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	body {
		margin: 0;
		padding: 0;
	}
	.main {
		width: 800px;
		margin: 0 auto;
		background: green;
	}
	.left {
		width: 220px;
		background: #ccc;
		float: left;
		height: 500px;
	}
	.right {
		width: 580px;
		background: blue;
		float: right;
		height: 500px;
	}


</style>
<body>
<div class="main">
	<div class="left"></div>
	<div class="right"></div>
</div>

</body>
</html>
[/cce]

三.三列布局

1.使用float

[cce]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	body {
		margin: 0;
		padding: 0;
	}
	.left {
		width: 33.33%;
		height: 500px;
		float: left;
		background: red;
	}
	.middle {
		width: 33.33%;
		height: 500px;
		float: left;
		background: blue;
	}
	.right {
		width: 33.33%;
		height: 500px;
		float: left;
		background: green;
	}


</style>
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
</html>
[/cce]

2.使用绝对定位：

[cce]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	body {
		margin: 0;
		padding: 0;
	}
	.left {
		width: 200px;
		height: 500px;
		background: red;
		position: absolute;/*绝对定位*/
		left: 0;
		top: 0;
	}
	.middle {
		height: 500px;
		background: blue;
		margin: 0 310px 0 210px;
	}
	.right {
		width: 300px;
		height: 500px;
		background: green;
		position: absolute;
		right: 0;
		top: 0;
	}


</style>
<body>
<div class="left">200px</div>
<div class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quisquam incidunt excepturi. Reiciendis cumque architecto, cum explicabo illum quod tenetur aliquid facilis quibusdam mollitia eligendi. A pariatur deleniti eaque, iste.</div>
<div class="right">300px</div>
</body>
</html>
[/cce]

四.混合布局

[cce]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	body {
		margin: 0;
		padding: 0;
	}
	.top {
		width: 100%;
		height: 100px;
		background: blue;
	}
	.main {
		width: 800px;
		height: 500px;
		background: red;
		margin: 0 auto;
	}
	.foot {
		width: 800px;
		height: 100px;
		background: green;
		margin: 0 auto;
	}
	.left {
		width: 300px;
		height: 500px;
		float: left;
		background: black;
	}
	.right {
		width: 500px;
		height: 500px;
		float: right;
		background: yellow;
	}
	.head {
		width: 800px;
		margin: 0 auto;
		height: 100px;
		background: red;
	}


</style>
<body>
<div class="top">
	<div class="head"></div>
</div>
<div class="main">
	<div class="left"></div>
	<div class="right"></div>
</div>
<div class="foot"></div>

</body>
</html>
[/cce]

使用相对和绝对定位混合布局：

[cce]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    
    .top {
        width: 100%;
        background: #ccc;
        height: 100px;
    }
    
    .foot {
        width: 100%;
        background: #ff6634;
        height: 50px;
    }
    
    .main {
        width: 100%;
        height: 500px;
        background: red;
    }
    
    .left {
        width: 200px;
        height: 500px;
        background: #0000fe;
        position: absolute;
        top: 100px;
        left: 0;
    }
    
    .right {
        height: 500px;
        background: #9acc99;
        position: relative;
        top: 0;
        right: 0;
        margin-left: 210px;
    }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="main">
            <div class="right">left</div>
            <div class="left">right</div>


    </div>
    <div class="foot">foot</div>
</body>

</html>

[/cce]