41-1 css
CSS（Cascading Style Sheets，层叠样式表），用来控制网页数据的表现，可以使网页的表现与数据内容分离。
CSS的四种引入方式
1. 行内式
行内式是在标签的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
<div style="background-color:red; width:300px; height:300px">123</div>
2. 嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<html>
<head>
<meta charset="utf-8">
<style>
div{
background-color: red;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>
3. 链接式
将一个.css文件引入到HTML文件中。推荐用这种方式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4. 导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中。这种方法不推荐用。使用的语法如下：
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
注意：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
CSS的选择器
一、各种选择器
1. 基础选择器
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
＊ : 通用元素选择器，匹配任何元素 如定义 * { margin:0; padding:0; }后 ，所有元素都应用此设置
E ： 标签选择器，匹配所有使用E标签的元素 如定义 p { color:green; }后，所有p标签都应用此设置
.class1 : 类选择器，匹配标签中属性class等于class1的元素 如定义.class1 { background:#ff0；} 后，<p class='class1'>hello</p>会应用此设置
#id1 ： id选择器，匹配属性id等于id1的元素 如定义#id1 { background:#ff0; } 后，<p id='id1'>hello</p>会应用此设置
2. 组合选择器
E,F ： 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 如div,p { color:#f00; }，div、p都应用此设置
E F ： 后代元素选择器，匹配所有E的子孙，E和F之间用空格分隔 如li a { font-weight:bold，li后的所有a都应用此设置
E>F ： 子元素选择器，只匹配所有E的儿子 如div > p { color:#f00; }，div的儿子p都应用此设置
E+F ： 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F 如div + p { color:#f00; }，div紧邻的下一个p，中间不能隔
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 p{ background-color: aqua; color: deeppink; } #div4>.c2{ background-color: green; } </style> </head> <body> <div class="c1">hello1 <div class="c2">hello2 <div>hello div3</div> <p>hello p1</p> </div> <p>hello p2</p> </div> <p>hello p3</p> <hr> <div id="div4">hello div4 <div class="c2">hello div5</div> <div class="c3">hello p4 <div class="c2">hello 6</div> </div> </div> </body> </html>
3. 属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值（E在此处可以省略，比如:[checked]）。 如： p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素。如：div[class="error"] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素。如：td[class~="name"] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素。如：div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素。如：div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素。如：div[class*="test"]{background:#ffff00;}
4. 伪类(Pseudo-classes)
CSS伪类是用来给选择器添加一些特殊效果。
（1）anchor伪类：专用于控制链接的显示效果
a:link {color: #FF0000} # 未访问的链接
a:hover {color: #FF00FF} # 鼠标悬浮状态，即鼠标移动到链接上
a:active {color: #0000FF} # 激活状态。（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态
a:visited {color: #00FF00} # 已访问的链接
<style type="text/css"> a:link{ color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; } </style> </head> <body> <a href="01-hello-world.html">hello-world</a> </body> </html>
（2）before after伪类
p:before 在每个 <p> 元素的内容之前插入内容 如：p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之后插入内容 如：p:after{ content:"hello"；color:red}
<!DOCTYPE html> <meta charset="utf-8" /> <style type="text/css"> p::before{ content: "\e678"; color: blue; } p::after{ content: "》"; color: blue; } </style> <p>平凡的世界</p> }
二、 样式设置的优先级
经过计算，数值大的样式设置优先级高。特别的：加 !important 后优先级会高于其他任务设置。
同级别的，后面的会覆盖前面的
CSS的常用属性
1. 颜色属性
color:red # 直接写英文单词，这种方式能表示的颜色有限 color:#ff0000 # 十六进制数 color:rgb(255,0,0) # rgb 3个十进制数 color:rgba(255,0,0,0.2) # rgba，第三个参数表示透明度，数值为0到1
注意：color:#112233可缩写为：color:#123，即用一个数字代表两个重复的数字。如：color:#808080不能缩写，而color:#880088;就可以写面color:#808
2. 字体属性
font-size:45px # 字号大小 font-family:"Times New Roman" # 字体 font-weight:lighter # 粗细 可以写个数字更为精细的量化，如：700 font-style:italic # 斜体
补充：
（1）css中font-family后面以逗号分开的多个值是什么意思？
body, button, input, select, td, textarea {
font: 12px Tahoma,Verdana,Arial,Helvetica,"\5b8b\4f53",sans-serif;
color: #333;
}
font-family 实际上是规定元素的字体系列。
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称：
- 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
- 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
3. 背景属性
background-color: azure # 背景颜色。默认transparent，即透明的。
background-image: url("img01.jpg") # 背景图片
background-repeat:no-repeat # 背景图片是否重复。repeat重复铺满背景；repeat-x延x轴重复；repeat-y延y轴重复
background-size: 200px 100px # 背景图片的大小: 长200px 高100px
background-position: left center # 背景图片水平左对齐、垂直居中对齐。仅有一参数left、center或right时，默认垂直居中对齐，只是水平对齐方式不同。
#简写为：
background: azure url("img01.jpg") no-repeat 10px 20px; # 后两个参数表示:距左边缘10px，距上边缘20px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } #div1{ height:800px; width: 800px; /*background-color: azure;*/ /*background-image: url("img01.jpg");*/ /*background-repeat:no-repeat;*/ /*background-size: 100px 100px;*/ /* 背景图片的大小*/ /*background-position: left;*/ background:azure url("img01.jpg") no-repeat 200px 100px; /*背景图片距左边缘200px，距上边缘100px*/ } </style> </head> <body> <div id="div1"> hello world </div> </body> </html>
注意：对某盒子设置背景色或背景图片后，如果没有width、height参数将此盒子“撑开”，是看不到背景的。还要注意对内联标签width、height参数不会生效，需要转成inline-block。
4. 文本属性
text-align: center # 横向对齐方式，center为居中。纵向可以用vertical-align line-height: 100px # 文本行高 即文字高度加上文字上下的空白区域的高度。在垂直方向上，文本在行内是垂直居中显示的 letter-spacing: 5px # 字符间距 word-spacing: 10px # 单词间距 text-transform: capitalize # 首字母大写 text-decoration: underline # text下加横线. a标签默认有下滑下，将值设为none去除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ background-color: azure; text-align: center; width: 100%; height: 300px; /*注意：这是div的高度*/ /* line-height: 300px; */ /*若设定的行高和div高度一样，则text垂直居中。因为text在行内空间中是垂直居中的*/ } span{ vertical-align: -10px; /*span元素在父级div内，垂直往下移动10px*/ } </style> </head> <body> <div id="div1"> <span>hello world</span> </div> </body> </html>
5. 边框属性
border-style: solid # 边框样式 border-color: red # 边框颜色 borderwidth: 5px # 边框宽度 border-radius: 20% # 边框圆角度。50% 是一个圆（比例再大都按50%处理）。 #简写： border: solid 5px red
6. 列表属性
list-style: circle # 列表项前面是圆圈 list-style: none # 列表项前面没有任何内容 list-style: upper-alpha # 列表项前是大写字母 list-style: disc # 列表项前是实心原点
ul,ol{ list-style: circle; }
7. display属性
display: none # 不显示 display: inline # 将块级标签变为内联标签 display: block # 将内联标签变为块级标签 display: inline-block # 既具有inline的优点不独占一行，又具有block的优点可以调行的长宽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ display: none; } .c1{ background-color: red; display: inline; } #span1{ background-color: green; display: block; } .c2{ width: 100px; height:100px; display: inline-block; background-color: yellow; } #outer{ word-spacing: -10px; /* 处理掉两个inline-block块间的空隙*/ } </style> </head> <body> <img src="img01.jpg"> <div class="c1">1</div>111 <span id="span1">222</span> <div id="outer"> <span class="c2">333</span> <span class="c2">444</span> </div> </body> </html>
8. 外边距和内边距
css中一切皆盒子。元素的大小包含自身的border、padding和content区域。
margin # 用于控制元素与元素之间的距离；改变margin影响元素间的相对位置，不会改变元素的大小； padding # 用于控制内容与边框之间的距离；改变padding会改变元素的大小，因为padding所占的空间是在元素内； border # 围绕在内边距和内容外的边框； content # 内容，显示文本和图像。
当指定一个元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。
margin:10px 5px 15px 20px; # 上 右 下 左 margin:10px 5px 15px; # 上 右左 下 margin:10px 5px; # 上下 右左 margin:10px; # 上右下左 margin:0 auto; # 在上层盒子中,居中放置
注意：
（1）body有默认margin：
因body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，将body的margin设为0，就可以去掉。
（2）margin collapse（边界塌陷）
外边距的重叠只产生在普通流文档的上下外边距之间。比如，当我们上下排列一系列P标签时，那么相邻p元素之间就不会因为外边距重叠而产生双倍的距离。
①兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
②父子div：如果父级div中没有border、padding、inline content，子级div的margin会一直向上找，直到找到某个标签包括border、padding、inline content中的其中一个，然后按此div 进行margin
-----------------------------------------------------------------------------------------------------------------------------------------------------
补充：
1、a 标签为什么不能继承父类的颜色
#CSS： div{ color:red; } #HTML： <div> <span>文字</span> <a href="#">链接</a> </div>
由于css的层叠（cascading），a元素继承自父级div的样式（color：red）被浏览器的a元素的默认样式覆盖了。
参考：https://www.zhihu.com/question/28370313
2、元素的不透明级别
div{
opacity:0.5;
}
opacity值为0-1，0表示完全透明。
脱离文档流
一、脱离文档流
1. block元素和inline元素在文档流中的排列方式
- block元素可以设置width、height、margin、padding属性，默认block元素宽度自动填满其父元素宽度。常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- inline元素设置width、height属性无效，其宽度、高度随元素的内容而变化。margin和padding属性：水平方向(padding-left, padding-right, margin-left, margin-right)都产生效果；竖直方向的 margin-top、 margin-bottom不会产生效果，padding-top、 padding-bottom会以自己原位置为基准，往外扩展背景，但自己位置不会变。常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等。
2. 脱离文档流
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走（像浮起来），其他盒子在排列的时候，会当做脱离文档流的元素已不存在而进行排列。
只有浮动float和绝对定位absolute才会脱离文档流。
需要注意的是：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它(可以说是完全无视)。
二、float
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）
（1）内联元素和块级元素，float起来之后，都会被隐性的变为inline-block元素。
（2）当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。
例1：假如某个div元素B是浮动的：
（1）如果B元素的前一个元素A也是浮动的，那么B元素会跟随在A元素的后边(如果一行放不下这两个元素，那么B元素会被挤到下一行)；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0 } #A{ width: 100px; height: 100px; background-color: aqua; float: left; } #B{ width: 100px; height: 100px; background-color: red; float: left; } #C{ width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div id="A"></div> <div id="B"></div> <div id="C"></div> </body> </html>
（2）如果B元素的前一个div元素A是标准流中的元素，那么B在垂直方向上相对位置不变，也就是说B的顶部和A的底部对齐，且B在水平方向上靠到最左边。B的后一个block元素C会认为B不存在，但C的文本依然会为B让出位置。B之后的inline元素，会为B空出位置，然后按顺序排列。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0 } #A{ width: 100px; height: 100px; background-color: aqua; } #B{ width: 100px; height: 100px; background-color: red; float: left; } #C{ width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div id="A">111</div> <div id="B">222</div> <div id="C">333</div> </body> </html>
例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } .container{ border:1px solid red;width:600px; background-color: cornflowerblue; } #box1{ background-color:green;float:left;width:100px;height:100px; } #box2{ background-color:deeppink; float:left;width:100px;height:100px; } #box3{ background-color:pink;height:40px; } </style> </head> <body> <div class="container"> <div id="box1">hello box1</div> <div id="box2">hello box2</div> <div id="cls"></div> </div> <div id="box3">hello box3</div> </body> </html>
.container和box3的布局是上下结构，上图发现box3跑到了上面，这是因为container里的子元素脱离了文档流，进而导致.container没有被撑开（注意：文字还是会在float元素位置的后面）。
想让container撑开，方法有两种：
方法一：给.container设置固定高度，一般情况下文字内容不确定多少就不能设置固定高度，所以一般不能设置“.container”高度(当然能确定内容多高，这种情况下“.container是可以设置一个高度即可解决覆盖问题。
方法二：清除浮动。
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
（1）清除方式一：
clear语法： clear : none | left | right | both
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } .container{ border:1px solid red;width:600px; background-color: cornflowerblue; } #box1{ background-color:green;float:left;width:100px;height:100px; } #box2{ background-color:deeppink; float:left;width:100px;height:100px; } #box3{ background-color:pink;height:40px; } #cls{ clear: both; } </style> </head> <body> <div class="container"> <div id="box1">hello box1</div> <div id="box2">hello box2</div> <div id="cls"></div> </div> <div id="box3">hello box3</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } .container{ border:1px solid red;width:600px; background-color: cornflowerblue; } #box1{ background-color:green;float:left;width:100px;height:100px; } #box2{ background-color:deeppink; float:left;width:100px;height:100px; } #box3{ background-color:pink;height:40px; } .clearfix:after{ content: "."; display: block; visibility: hidden; height:0; clear: both; } </style> </head> <body> <div class="container clearfix"> <div id="box1">hello box1</div> <div id="box2">hello box2</div> </div> <div id="box3">hello box3</div> </body> </html>
整段代码就相当于在浮动元素后面紧跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。 之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
（2）清除方式二：
在父级标签中加如下代码：
overflow: hidden;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .item{ width: 900px; height: 150px; background-color: steelblue; border: 1px solid yellow; overflow: hidden; /*将溢出的部分进行隐藏*/ /*overflow:auto;*/ /*自动添加滑块，溢出的部分通过移动滑块可以看到*/ } </style> </head> <body> <div class="container"> <div class="item"> <img src="img01.jpg"> </div> </div> </body> </html>
overflow：hidden的含义是超出的部分要裁切隐藏（如上例中显示的那样）。
那么为什么通过添加overflow：hidden能清除浮动呢？因为“overflow：hidden”的处理过程要经历两步：第一步是计算出所有子元素加起来一共多高，第二步将子元素的总高超出父级元素高度的部分（即溢出的部分）隐藏。
float的元素虽然不在普通流中，但在计算子元素总高度是会把它算进去。如果没有明确设定父级元素（即容器）高度的情况下，父级元素的高度默认是所有子元素的总高。这样父级元素就会被撑开，从而达到了清除浮动的效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } .container{ border:1px solid red;width:300px; overflow: hidden; } #box1{ background-color:green;float:left;width:100px;height:100px; } #box2{ background-color:deeppink; float:right;width:100px;height:100px; } #box3{ background-color:pink;height:40px; } </style> </head> <body> <div class="container"> <div id="box1">box1 向左浮动</div> <div id="box2">box2 向右浮动</div> </div> <div id="box3">box3</div> </body> </body> </html>
三、position
1. position: static
为默认值，即不明确写出postion属性，标签默认就是static。无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
2. position: fixed
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ height: 1000px; background-color: green; } .div2{ height: 1000px; background-color: orange; } .div3{ position: fixed; right: 30px; bottom: 30px; } </style> </head> <body> <div class="div1">box1</div> <div class="div2">box2</div> <div class="div3">返回</div> </body> </html>
3. position: relative/absolute
（1）relative 相对定位。
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .div1{ width:100px; height: 100px; background-color: green; } .div2{ width:100px; height: 100px; background-color: orange; position: relative; left: 100px; top: 100px; } .div3{ width:300px; height: 300px; background-color: dodgerblue; } </style> </head> <body> <div class="div1">box1</div> <div class="div2">box2</div> <div class="div3">box2</div> </body> </body> </html>
（2）absolute 绝对定位
设置为绝对定位的元素框从文档流完全脱离，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .div1{ width:100px; height: 100px; background-color: green; } .div2{ width:100px; height: 100px; background-color: orange; position: absolute; left: 100px; top: 100px; } .div3{ width:300px; height: 300px; background-color: dodgerblue; } </style> </head> <body> <div class="div1">box1</div> <div class="div2">box2</div> <div class="div3">box2</div> </body> </body> </html>
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性（数值越大越处于上层，而不会被下面的层覆盖）定义。
总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .div1{ width:100px; height: 100px; background-color: green; } .div2{ width:100px; height: 100px; background-color: orange; position: absolute; left: 100px; top: 100px; } .div3{ width:300px; height: 300px; background-color: dodgerblue; } .container{ width: 300px; height: 300px; background-color: aqua; position: relative; } </style> </head> <body> <div class="div1">box1</div> <div class="container"> <div class="div2">box2</div> </div> <div class="div3">box2</div> </body> </body> </html>
参考：http://www.cnblogs.com/yuanchenqi/articles/5977825.html
浙公网安备 33010602011771号