标签：
@charset "UTF-8"; /* CSS Document */ body{ margin:100px; height:800px; border:1px solid red; }
/*绝对定位*/
header{ width:100px; height:100px; background-color:gray; position:absolute;
/*绝对位置，脱离文档空间，在z轴上浮空*/ top:0px; left:0px; z-index:1;
/*数字越大，层次越高，auto默认层次*/ } aside{ width:100px; height:100px; background-color:yellow; position:absolute; top:20px; left:20px; }
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="123.css" type="text/css"> <title>css传统布局</title> </head> <body> <header> header </header> <aside> aside </aside> 树懒啊闪电 </body> </html>
------------gegegegegegeg---------
@charset "UTF-8"; /* CSS Document */ body{ margin:100px; height:800px; border:1px solid blue; position:relative; } header{ width:100px; height:100px; background-color:green; position:absolute; top:10px; left:10px;
<!doctype html> <html lang="zh-cn"> <link rel="stylesheet" href="CSS定位.css" type="text/css"> <head> <meta charset="UTF-8"> <title>某点的绝对定位</title> </head> <body> <header> herder </header> 闪电 </body> </html>
------------gegegeggegegegegegegge---------------
@charset "UTF-8"; /* CSS Document */ body{ margin:100px; width:500px; height:800px; border:1px solid blue; } header{ width:100px; height:100px; background-color:green; position:fixed; top:100px; left:0px; } /*以窗口左上角为基准点定位，不占位，header随窗口移动*/
<!doctype html> <html lang="zh-cn"> <link rel="stylesheet" href="以窗口定位.css" type="text/css"> <head> <meta charset="UTF-8"> <title>窗口定位</title> </head> <body> <header> herder </header> </body> </html>
---------------gegegeggegegegegegegeg--------------------
@charset "UTF-8"; /* CSS Document */ body{ width:960px; margin:0 auto; position:relative; } header{ height:120px; width:960px; background-color:olive; position:absolute; resize:both; /*允许调节宽和高,表单元素textarea默认允许更改元素尺寸，而普通元素需要设置overflow*/ overflow:auto; z-index:1; } textarea{ resize:none; /*默认不可以拖动调整大小*/ } aside{ width:200px; height:500px; border:5px solid blue; box-sizing:border-box; /* border-box使border和padding不再额外增加元素的大小，设置后不用于元素总长度 */ background-color:red; position:absolute; top:120px; left:0px } section{ width:760px; height:500px; background-color:yellow; position:absolute; top:120px; right:0px } footer{ width:960px; height:100px; background-color:green; position:absolute; top:620px; }
<!doctype html> <html lang="zh-cn"> <link rel="stylesheet" href="布局.css" type="text/css"> <head> <meta charset="UTF-8"> <title>绝对定位的布局</title> </head> <body> <header> herder </header> <aside> aside </aside> <section> section <textarea name="123" id="aaa" cols="30" rows="10"></textarea> </section> <footer> footer </footer> </body> </html>
标签：
原文地址：http://www.cnblogs.com/webday/p/5330557.html
