relative
1.当父元素设置了relative的zindex,子元素为absolute时,设置zindex无效
2.当父元素relative设置了overflow:hidden时,子元素absolute超出父元素部分无效
3.relative只能限制fix的zindex层级
4.Relative相当于自身进行定位,absolute相对于边界
5.Margin会影响其他元素定位,而relative无影响(自定义拖拽效果)
6.top&&bottom同时存在,bottom无效;同理,right无效
7.relative可提高层叠级数
8.父元素的zindex较大排前面(数值)
9.Auto排在上,(当前层叠上下文的生成盒子层叠水平是0 盒子【除非是根元素】不会创建一个新的层叠上下文)
层叠上下文&层叠水平
层叠上下文:是html元素中的一个三维概念,表示元素再z轴上有了‘可以高人一等’
层叠水平:所有元素都有决定同一层叠上下文中的元素在z轴上的显示顺序,比较两个元素的层叠水平,必须是这两个元素在同一个层叠上下文中,否则没有意义。z-index可以影响 层叠水平(只是影响,不是决定)
页面根元素天生具有层叠上下文,称之为“根层叠上下文”
Zindex值为数值的定位元素也具有层叠上下文
层叠顺序是规则
(在同一个层叠上下文中的元素,对应下面规则的序号越大,位置越高)
1.层叠上下文 background/border
2.负z-index
3.block块级元素
4.float浮动元素
5.inline/inline-block行内元素
6.z-index:auto或者z-index:0(不依赖z-index的层叠上下文)
7.正z-index
1通常是装饰属性;34是布局,5是内容——所以行内元素具有较高的层叠序号
背景色覆盖是层叠顺序,文字覆盖是后来居上
父元素成为层叠上下文
1.父元素设置display:flex且子元素的zindex不为0时
2.父元素的透明度有具体数值
3.transform不等于none
4.mix-blend-mode(混合模式)不等于normal
5.filter不等于none
6.isolation:(isolate isolation是为mix-blend-mode而生的属性;mix-blend-mode混合默认z轴所有层叠在下面的元素)
7.条件1:父级需要是flex/inline-flex
条件2:子元素z-index不为auto
(只针对chrome等blink内核浏览器有效)
8.will-change:transform(will-change是提高页面滚动、动画等渲染性能的属性)
9.-webkit-overflow-scrolling:touch(移动端)
定位元素层叠在普通元素之上,因为一旦成为定位元素,z-index自动生效,默认z-index:auto也可以看作z-index:0;所以会覆盖block、inline、float元素
IE7的zindex:auto也会新建层叠上下文;元素的层叠水平主要由所在的层叠上下文决定(避免使用定位属性,定位属性从大容器平级分离为私有小容器)
避免一山比一山高的样式问题(多人写作及后期维护):对于非浮层元素,避免设置z-index值,zindex值没有任何道理需要超过2
避免浮层组件因zindex被覆盖的问题(组件的覆盖规则具有动态性,意向不到的高层级元素):
Zindex负值元素再层叠上下文的背景之上,其他元素之下。
absolute:(无依赖)
1.独立的absolute可以摆脱overflow的限制,无论是滚动还是隐藏
2.绝对定位生效的时候,浮动无效
3.用了absolute之后,用display,会保留位置跟随特性,要注意的是IE7中用了4.absolute之后,只会是inline-block水平显示,指定包上<div>就解决了;
5.配合margin,精确定位,适应各种浏览器
6.在image和i中间使用注释,可以消除它们之间的空格(保证贴合,可使用absolute跟随性)
下拉框定位(无依赖定位)
利用了即使给予了绝对定位属性(前提不给予任何top/left/bottom/right值),元素会依然保持普通文档流的视觉位置。这里说的位置是一种视觉位置,并不是文档流位置,因为其本身高度在父元素中已经塌陷,也就是大家平时所谓的已经脱离文档流),此时使用margin做平移,也就是相对于自己进行了定位,前提要将“视觉位置”规划好,也就是按照正常的文档流进行布局(后面的元素在右或是下侧)。
对齐居中或边缘
绝对定位的元素前加 父元素text-align:center;即可使得绝对定位的元素居中
<div style="background: rebeccapurple;width: 200px;height: 200px;margin: 50px auto;text-align: center">
<div style="background: aquamarine;width: 50px;height: 50px;position: absolute;display: inline-block;margin-left: -25px"></div>
</div>
右边侧栏应用:
<div class="constr">
<div class="course-fixed-x">
<div class="course-fixed">
<a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a>
<a href="http://www.imooc.com/mobile/app" class="goto_top_app"></a>
<a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a>
</div>
</div>
</div>
<style>
body {
margin: 0;
font: 14px/1.4 "Microsoft YaHei";
background-color: #EDEFF0;
}
.constr {
width: 1200px;
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
.goto_top_diaocha, .goto_top_app, .goto_top_feed {
display: block;
width: 48px;
height: 48px;
margin-top: 10px;
background: url(http://img.mukewang.com/5453076e0001869c01920098.png) no-repeat;
}
.goto_top_diaocha {
background-position: -48px 0;
}
.goto_top_diaocha:hover {
background-position: -48px -50px;
}
.goto_top_app {
background-position: -96px 0;
}
.goto_top_app:hover {
background-position: -96px -50px;
}
.goto_top_feed {
background-position: -144px 0;
}
.goto_top_feed:hover {
background-position: -144px -50px;
}
.course-fixed-x {
height: 0;
text-align: right;
overflow: hidden;
}
.course-fixed {
display: inline;
position: fixed;
margin-left: 20px;
bottom: 100px;
}
</style>
星号对齐:
星号进行绝对定位
图标对齐:

图标进行无依赖绝对定位
文字溢出:

absolut不占据尺寸
回流与重绘:动画尽量作用在绝对定位元素上
垂直空间的层级:后来居上
z-index无依赖
1.如果只有一个绝对定位元素,自然不需要zindex,自动覆盖普通元素
2.如果两个绝对定位,控制dom流的前后顺序达到需要的覆盖效果,依然无zindex
3.如果多个绝对定位交错,非常非常少见!,zindex:1控制
4.如果非弹框类的绝对定位元素zindex>2,必定zindex冗余,需要优化

Absolute绝对定位的方向是对立的(left&right top&bottom)
举例:
Position:absolute; left:0; top:0; width:50%
等同于==》
position:absolute; left:0; top:0; right:50%;(IE7+才支持)
相互支持性:
1.容器无需固定width、height值,内部元素亦可拉伸;
2.容器拉伸,内部元素支持百分比width、height值
若拉伸和width&height尺寸同时存在,那么width/height尺寸大于left/top/right/bottom拉伸尺寸
因此=》position:absolute;top:0;left:0;right:0;width:50%的实际宽度是50%而不是100%(当使用margin:auto 可实现居中=》绝对元素的绝对居中效果 IE8+支持)
一些例子
没有宽度和高度声明实现的全屏自适应效果:
<style>
html, body { height: 100%; }
.overlay {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
background-color: #000;
opacity: .5; filter: alpha(opacity=50);
}
</style>
<div class="overlay"></div>
高度自适应的九宫格效果:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高度自适应的九宫格效果</title>
<style>
html, body { height: 100%; margin: 0; }
.page {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
}
.list {
float: left;
height: 33.3%; width: 33.3%;
position: relative;
}
.list:before {
content: '';
position: absolute;
left: 10px; right: 10px; top: 10px; bottom: 10px;
border-radius: 10px;
background-color: #cad5eb;
}
.list:after {
content:attr(data-index);
position: absolute;
height: 30px;
left: 0; right: 0; top: 0; bottom: 0;
margin: auto;
text-align: center;
font: 24px/30px bold 'microsoft yahei';
}
</style>
</head>
<body>
<div class="page">
<div class="list" data-index="1"></div>
<div class="list" data-index="2"></div>
<div class="list" data-index="3"></div>
<div class="list" data-index="4"></div>
<div class="list" data-index="5"></div>
<div class="list" data-index="6"></div>
<div class="list" data-index="7"></div>
<div class="list" data-index="8"></div>
<div class="list" data-index="9"></div>
</div>
</body>
</html>
absolute与整体布局:
1.body降级,子元素升级
(全屏拉伸效果:position:absolute;left:0;top:0;right:0;bottom:0)
绝对定位受限于父级,因此子元素想要拉伸需要:
html,body{
height:100%;
}

float
具有包裹性:
display:absolute fixed sticky
position:absolute fixed sticky
overflow:hidden scroll
具有破坏性:
display:none
position:absolute fixed sticky
清除浮动的两大方法:
底部插入clear:both
父元素BFC(IE8+)或haslayout(IE6/IE7)
Clear通常应用形式:
html block水平元素底部
css after伪元素底部生成
权衡后的策略:
IE8之后:
IE6&IE7:
伪元素更好的方法:
.clearfix应用在包含浮动子元素的父级元素上
注意:
1.使用了"clear:both"但是它会与margin重叠,则margin-botttom无法发挥作用;
2.使用了“overflow:hidden”使得元素BFC化,包裹好了,不影响margin-bottom发挥作用
<div style="background-color: #f5f5f5;">
<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;">
<div style="clear:both; margin-bottom:100px;">clear:both;</div>
</div>
<div style="margin-top: 100px;">本文字离图片的距离是?</div>
<br><br><br><br>2.
<div style="background-color: #f5f5f5; overflow: hidden;">
<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left; margin-bottom: 100px;">
</div>
<div style="margin-top: 100px;">本文字离图片的距离是?</div>
</div>
float作用
1.元素block块状化(砖头化)
2.破坏性造成的紧密排列特性(去空格化)
规定可以由用户调整 div 元素的大小:
div
{
resize:both;
overflow:auto;
}
IE7浮动问题
一些要注意的点
包含块:离该该元素最近的块级祖先(父级)
《css权威指南》:浮动元素同时处于(常规)流内和流外
1.浮动元素不影响块级元素的布局(块级元素会当浮动元素不存在)
2.浮动元素会影响行内元素的布局(从而间接影响块级元素的布局
浮动元素的摆放:
尽量靠上
尽量靠左/右
仅能要挨着靠,margin外边缘挨着(两个浮动元素之间的margin不会被合并)
浮动元素间接影响块级元素
撑开内含浮动元素的无高度div:
1.可用a标签 设置display:inline-block;width:100%, 把含浮动元素的div撑起来(div不用设计高度)
2.overflow:hidden(BFC)
3.可用a标签 设置display:block;width:100%,clear:both
4.div=》display:table
5.div=》display:table-cell
6.div=》display:flow-root(触发BFC)
7.div::after代替a标签=》content:’’ display:block; clear:both;(最下方存在一个没有高度的元素)
8.使用.clearfix:after{content:’’ display:block; clear:both;}
9.让div也浮动(BFC)
教学视频:https://segmentfault.com/l/15...
overflow
overflow-x:y方向自动变成auto
在IE7中,设置了宽度100%时,会出现水平滚动条
使overflow起效:
1.非display:inline水平
2.对应方位的尺寸限制。width/height/max-width/max-height/absolute拉伸
3.对于单元格td等,还需要table为table-layout:fixed状态
overflow:visible
IE7浏览器下,文字越多,按钮两侧padding留白就越大
按钮在IE8显示正常
=》IE7解决方案:给所有的按钮添加样式overflow:visible
注意:
无论什么浏览器,默认滚动条均来自<html>,而不是<body>标签
Body/html与滚动条
去除页面默认滚动条:html{ overflow:hidden; }
js与滚动高度:
chrome: document.body.scrollTop;
其他浏览器:document.documentElement.scrollTop;
但两者不会同时存在,因此:
var st = document.body.scrollTop+document.documentElement.scrollTop;(不推荐)
建议写法:var st = document.body.scrollTop||document.documentElement.scrollTop;
overflow的pading-bottom缺失现象:
除了chrome浏览器,其他浏览器都不显示 =》 导致了不一样的scrollHeight(元素内容高度)
解决水平居中跳动的问题的修复
1.html{
overflow-y:scroll;
}
2.
.container{
width:1200px;
padding-left:calc(100vw - 100%);
}
100vw-浏览器宽度;100%-可用内容宽度
自定义滚动条-webkit
Ios原生滚动回调效果:
-webkit-overflow-scrolling:touch;
JQ滚动条自定义插件:https://github.com/malihu/mal...
BFC
块级格式化上下文(内部元素不会影响外部元素)
渲染规则:
1.bfc元素的垂直方向边距发生重叠
2.bfc区域不会与浮动元素重叠
3.独立容器
4.计算bfc高度时,浮动元素也会参与计算
创建bfc:
1.overflow
2.浮动不为none
3.position不是static
4.display与table有关
bfc使用场景:
...
BFC垂直方向重叠
//消除重叠
<section id="bfc">
<style>
#bfc{
background: paleturquoise;
overflow: hidden;
}
#bfc>p{
margin: 5px auto 25px;
background: salmon;
}
</style>
<p>1</p>
<div style="overflow: hidden;background: mediumorchid">
<p>2</p>
</div>
<p>3</p>
</section>
布局应用:
<section id="layout">
<style>
#layout{
background: lightpink;
}
.left{
float: left;
width: 100px;
height: 100px;
background: lemonchiffon;
}
.right{
height: 110px;
background: lightblue;
overflow: hidden;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
overflow与bfc:
1.auto
2.scroll
3.hidden
清除部分浮动:
.clearfix{
overflow:hidden;
_zoom:1;
}
清除浮动影响
通用:
.clearfix{
overflow:hidden;
*zoom:1;
}
.clearfix:after{
content:’’;
display:table;
clear:both;
}
避免margin穿透问题
Overflow:auto scroll hidden
两栏自适应布局
Overflow:scroll auto hidden
注意:使用padding做流体自适应布局的时候,万万不可让自适应层BFC化!
两栏自适应布局
(IE7只适用于block元素)
overflow与absolute
absolute使overflow:hidden失效
绝对定位元素不总是被父级overflow属性剪裁,尤其当overflow在绝对定位元素及其包含块(含position:relative absolute fixed声明的父级元素,没有则body元素)之间的时候
避免失效
1.overflow元素自身为包含块
2.overflow元素的子元素为包含块(为绝对定位元素的父级)
3.任意合法transform生命当做包含块(让overflow元素自身transform只适用于IE9+/FireFox;让overflow子元素transform可通用IE9+)
overflow失效妙用

resize拉伸
Both:水平垂直两边拉
horizontal:只有水平方向拉
vertical:只有垂直方向拉
使用前提:元素overflow的属性值不能是visible
文本域默认overflow:auto
text-overflow:ellipsis
文本溢出用省略号表示
使用前提:元素overflow的属性值是hidden
锚点技术
锚点定位的本质:改变容器的滚动高度
锚点定位的触发:url地址中锚链和锚点元素 可focus的锚点元素处于focus态
锚点定位的作用:快速定位
锚点定位与overflow选项卡技术:
页面布局的变通
左右宽度固定,中间适应
已知左右栏高度和宽度,中间块为自适应
<style>
.content{
width: auto;
background: #e6e6e6;
/*display: flex;*/
}
div{
height: 100px;
}
.left{
width: 300px;
background: blueviolet;
float: left;
}
.container{
background: pink;
}
.right{
width: 300px;
background: paleturquoise;
float: right;
}
.content-absolute .left2,.container2,.right2{
position: absolute;
}
.left2{
left: 0;
width: 300px;
background: palevioletred;
}
.container2{
left: 300px;
right: 300px;
background: yellowgreen;
}
.right2{
right: 0px;
background: antiquewhite;
width: 300px;
}
.content-flex{
display: flex;
}
.left3{
background: mediumvioletred;
width: 300px;
}
.container3{
background: #bab8c7;
flex: 1;
}
.right3{
background: mediumturquoise;
width: 300px;
}
.content-table{
display: table;
width: 100%;
}
.right4{
width: 300px;
display: table-cell;
background: #d78cfb;
}
.left4{
width: 300px;
display: table-cell;
background: lightcoral;
}
.container4{
background: lavender;
}
.content-grid{
display: grid;
width: 100%;
grid-template-columns: 300px auto 300px;
}
.left5{
background: #f8de72;
}
.right5{
background: #e3f8b8;
}
.container5{
background: #f89761;
}
</style>
</head>
<body style="padding: 0;margin: 0">
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="container">
浮动
</div>
</div>
<!--绝对定位方案-->
<div class="content-absolute">
<div class="left2"></div>
<div class="container2">绝对定位</div>
<div class="right2"></div>
</div>
<!--弹性盒子-->
<div class="content-flex">
<div class="left3"></div>
<div class="container3">弹性</div>
<div class="right3"></div>
</div>
<!--表格布局-->
<div class="content-table">
<div class="left4"></div>
<div class="container4">表格</div>
<div class="right4"></div>
</div>
<!--网格布局-->
<div class="content-grid">
<div class="left5"></div>
<div class="container5">网格</div>
<div class="right5"></div>
</div>
</body>
上下高度固定,中间适应
<style>
body {
padding: 0;
margin: 0;
height: 100%;
}
.header1 {
height: 100px;
background: #690;
width: 100%;
position: absolute;
top: 0;
}
.container1 {
background: #FC0;
width: 100%;
overflow: auto;
top: 100px;
position: absolute;
bottom: 100px;
}
.footer1 {
height: 100px;
background: #690;
width: 100%;
position: absolute;
z-index: 200;
bottom: 0;
}
</style>
</head>
<body>
<!--浮动-->
<div class="content-absolute">
<div class="header1"></div>
<div class="container1">
绝对定位
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
<p>绝对定位</p>
</div>
<div class="footer1"></div>
</div>
</body>
两栏布局
左宽度固定,右边自适应
<div class="content">
<div class="left1">
<p>左侧顶宽</p>
</div>
<div class="right1">
<div class="right1-content">
<p>右侧自适应</p>
</div>
</div>
</div>
.content {
width: 100%;
margin: 0 0 10px;
}
.left1 {
position: relative;
float: left;
width: 100px;
margin-right: -100px;
background: #4eb3b9;
}
.right1 {
float: right;
width: 100%;
background: #f8de72;
}
.right1-content {
margin-left:110px;
background: #ff0097;
}
左宽度自适应,右边固定宽
<div class="content">
<div class="left1">
<div class="left1-content">
左侧自适应
</div>
</div>
<div class="right1">
右侧顶宽
</div>
</div>
.content {
width: 100%;
margin: 0 0 10px;
}
.left1 {
background: #4eb3b9;
float: left;
width: 100%;
}
.right1 {
background: #f8de72;
width:100px;
float: right;
position: relative;
margin-left: -100px;
}
.left1-content {
background: #ff0097;
margin-right: 120px;
}
上高度固定,下自适应
盒模型
基本概念
两种模型的设置:
box-sizing:content-box;//标准模型 默认
box-sizing:border-box;//IE模型
JS设置盒模型对应的宽和高
dom.style.width/height:只能取出内联样式
dom.currentStyle.width/height:三种方式都可以,只有ie支持
window.getComputedStyle(dom).width/height:都通用
dom.getBoundingClientRect().width/height:计算一个元素的绝对位置,根据视窗计算
实例题
解释边距重叠
解决方案:块级格式化上下文bfc
<style>
html *{
padding: 0;
margin: 0;
}
.child{
height: 100px;
background: pink;
margin-top: 10px;
}
.box{
background: paleturquoise;
/*高度改变 父元素bfc*/
overflow: hidden;
}
</style>
</head>
<body>
<!--浮动-->
<div class="box">
<div class="child"></div>
</div>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。