河码

布局和定位的区别

布局是屏幕平面上的

定位是垂直于屏幕的

完全不同的概念

一个 div 的分层

从文档流和盒模型说起

背景的范围是从哪到哪？

[ ] border内侧围住的区域
[x] border外侧围住的区域

如何验证？border半透明

代码验证：

/* 点rgba 按住Alt 上下键 0.1 幅度 Chrome开发者调试 */
.demo {
    box-sizing: border-box;
    margin: 12px;
    border: 15px solid rgba(255, 0, 0, .9);
    padding: 22px;
    width: 300px;
    height: 300px;
    background: lightblue;
    color: darkorange;
}

做demo验证CSS特性

demo_position_divTest

从屏幕侧面看一个div，是什么样子

内容区里的文字会遮住background；

border会遮住background

内容区里的文字会遮住border吗？

会

脱离文档流的子元素比之前高一点（离屏幕近一些）跳出并不再影响原普通文档流

其实就是浮起来了一点点

代码验证：

/* 字体变大 直至覆盖到border */
.demo {
    box-sizing: border-box;
    border: 15px solid red;
    width: 300px;
    height: 300px;
    background: lightblue;
    color: darkorange;
    font-size:120px;
}

上帝视角看div三维立体结构 IE Edge 3D view

分层：内容文字 > border > background

较后的子元素里的文字会覆盖较前的

~~让浏览的网页带有3D效果实现3D视图查看网页查看3D中的网站结构~~

~~火狐（firefox）使用Tilt插件实现3D视图查看网页~~

~~firefox扩展Tilt-让浏览的网页带有3D效果~~

* 新版火狐本不支持

Firefox 不要的 3D 视图功能，微软将它引入 Chromium

`position`的五个取值

position:static：默认值，待在文档流里，每个块级元素占据自己的区块（block），元素与元素之间不产生重叠
position:relative：相对定位，升起来，但不脱离文档流（所占据的位置不变，仍在默认位置处占据空间）
position:absolute：绝对定位，定位基准是祖先里最近的非static元素
position:fixed：固定定位，定位基准是viewport（有诈）
position:sticky：粘滞定位，直接举例

注意，position:static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

经验

如果在元素上写了position:absolute，一定在父级以上元素补一个position:relative
如果写了position:absolute或position:fixed，一定得补top和left
position:sticky兼容性差，主要用于面试

网站实例：

Julius Bär 宝盛

`position:relative`

相对于默认位置（即position:static时的位置）进行偏移，即定位基点是元素的默认位置

所占据的位置不变，仍在默认位置占据空间，只是显示的位置和默认位置间有一个偏移

必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离

`position:relative`使用场景

用于做位移（很少）对齐
用于给position:absolute元素做父级定位基点

`position:relative`配合`z-index`

z-index:auto默认值，计算出的值是0，但不创建新的层叠上下文
z-index:0/1/2创建新的层叠上下文
z-index:-1/-2创建新的层叠上下文

z-index:auto和z-index:0是不同的

`position:relative`经验

写z-index:9999菜
学会管理z-index

`position:absolute`

`position:absolute`使用场景

脱离原来的位置，另起一层（比如对话框的关闭按钮）
鼠标提示信息（开发者工具设置展示hover：点击Styles :hov 勾选:hover）

`position:absolute`配合`z-index`

同之前

`position:absolute`经验

必须有参考点
position:absolute并不一定是相对于position:relative定位的
父元素position:relative，不影响父元素，以父元素作为参考点（定位基准是祖先里最近的非static元素）
不是static就是定位元素
不设left/top、设为auto时，位置处于默认，即不设绝对定位时的原始位置
某些浏览器上如果不写top/left会位置错乱
善用：left:100%
善用：left:50%;加负margin（需计算）
或者transform: translateX(-50%);

完全脱离普通文档流
位置无法被其他任何元素改变但会互相覆盖
left:10px 是自己的外边距相对于参考元素的边框内壁偏移 10px
宽度收缩必须设置固定宽
行内元素设置绝对定位后有块级特性可设宽高但不为块级元素
适用元素重叠任意放置

`position:fixed`

定位基准是viewport（有诈）

所在的父元素如果有transform:scale(0.9);之类的属性，那就不一定了

`position:fixed`使用场景

广告
回到顶部

`position:fixed`配合`z-index`

同之前

`position:fixed`经验

视口不包括滚动条（iframe里的也是不包括）
手机上尽量不要用这个属性，坑多
搜索「移动端fixed」

`position:sticky`

`position:sticky`使用场景

`position:sticky`配合`z-index`

`position:sticky`经验

position:sticky

推走标题

`z-index`怎么用

只要是给元素定了位（非static），变成定位元素（position:relative | absolute | fixed），自然超越了当前父元素的内容文字之上
默认z-index:0;
所有定位元素以所处父元素的内容文字所在的层作为基准，默认第一层z-index:0;，越往上数值越大
z-index为负的话，处于父元素的background之后
定位元素底是当前的层叠上下文，即默认的<html></html>

demo_position_divTest

层叠上下文

也叫堆叠上下文

z-index:10和z-index:5哪个高？

不一定，要看所处的父元素是否有（形成）自己的层叠上下文

demo_stackingContext

定位与层叠上下文

比喻

每个层叠上下文就是一个新的小世界（作用域）
这个作用域里的z-index和外界无关
处在同一个作用域的z-index之间才能比较
默认层叠上下文是根元素<html></html>
相当于z-index的作用域

demo

哪些不正交的属性可以创建它

MDN文档
需要记住的：z-index/flex/opacity/transform
只要满足一个条件，就自动创建一个层叠上下文
其他随时搜索查看即可

opacity:0.5;和background:rgba(0,0,0,0.5)的区别

opacity影响整个元素

负`z-index`与层叠上下文

也只在其属于的作用域里可比较

负z-index逃不出所属层叠上下文

优先级样式继承、选择器权重

·未完待续·

参考文章

作者： Joel
文章链接：
版权声明
非自由转载-非商用-非衍生-保持署名

布局和定位的区别

布局是屏幕平面上的

定位是垂直于屏幕的

完全不同的概念

一个 div 的分层

从文档流和盒模型说起

背景的范围是从哪到哪？

[ ] border内侧围住的区域
[x] border外侧围住的区域

如何验证？border半透明

代码验证：

/* 点rgba 按住Alt 上下键 0.1 幅度 Chrome开发者调试 */
.demo {
    box-sizing: border-box;
    margin: 12px;
    border: 15px solid rgba(255, 0, 0, .9);
    padding: 22px;
    width: 300px;
    height: 300px;
    background: lightblue;
    color: darkorange;
}

做demo验证CSS特性

demo_position_divTest

从屏幕侧面看一个div，是什么样子

内容区里的文字会遮住background；

border会遮住background

内容区里的文字会遮住border吗？

会

脱离文档流的子元素比之前高一点（离屏幕近一些）跳出并不再影响原普通文档流

其实就是浮起来了一点点

代码验证：

/* 字体变大 直至覆盖到border */
.demo {
    box-sizing: border-box;
    border: 15px solid red;
    width: 300px;
    height: 300px;
    background: lightblue;
    color: darkorange;
    font-size:120px;
}

上帝视角看div三维立体结构 IE Edge 3D view

分层：内容文字 > border > background

较后的子元素里的文字会覆盖较前的

~~让浏览的网页带有3D效果实现3D视图查看网页查看3D中的网站结构~~

~~火狐（firefox）使用Tilt插件实现3D视图查看网页~~

~~firefox扩展Tilt-让浏览的网页带有3D效果~~

* 新版火狐本不支持

Firefox 不要的 3D 视图功能，微软将它引入 Chromium

`position`的五个取值

position:static：默认值，待在文档流里，每个块级元素占据自己的区块（block），元素与元素之间不产生重叠
position:relative：相对定位，升起来，但不脱离文档流（所占据的位置不变，仍在默认位置处占据空间）
position:absolute：绝对定位，定位基准是祖先里最近的非static元素
position:fixed：固定定位，定位基准是viewport（有诈）
position:sticky：粘滞定位，直接举例

注意，position:static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

经验

如果在元素上写了position:absolute，一定在父级以上元素补一个position:relative
如果写了position:absolute或position:fixed，一定得补top和left
position:sticky兼容性差，主要用于面试

网站实例：

Julius Bär 宝盛

`position:relative`

相对于默认位置（即position:static时的位置）进行偏移，即定位基点是元素的默认位置

所占据的位置不变，仍在默认位置占据空间，只是显示的位置和默认位置间有一个偏移

必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离

`position:relative`使用场景

用于做位移（很少）对齐
用于给position:absolute元素做父级定位基点

`position:relative`配合`z-index`

z-index:auto默认值，计算出的值是0，但不创建新的层叠上下文
z-index:0/1/2创建新的层叠上下文
z-index:-1/-2创建新的层叠上下文

z-index:auto和z-index:0是不同的

`position:relative`经验

写z-index:9999菜
学会管理z-index

`position:absolute`

`position:absolute`使用场景

脱离原来的位置，另起一层（比如对话框的关闭按钮）
鼠标提示信息（开发者工具设置展示hover：点击Styles :hov 勾选:hover）

`position:absolute`配合`z-index`

同之前

`position:absolute`经验

必须有参考点
position:absolute并不一定是相对于position:relative定位的
父元素position:relative，不影响父元素，以父元素作为参考点（定位基准是祖先里最近的非static元素）
不是static就是定位元素
不设left/top、设为auto时，位置处于默认，即不设绝对定位时的原始位置
某些浏览器上如果不写top/left会位置错乱
善用：left:100%
善用：left:50%;加负margin（需计算）
或者transform: translateX(-50%);

完全脱离普通文档流
位置无法被其他任何元素改变但会互相覆盖
left:10px 是自己的外边距相对于参考元素的边框内壁偏移 10px
宽度收缩必须设置固定宽
行内元素设置绝对定位后有块级特性可设宽高但不为块级元素
适用元素重叠任意放置

`position:fixed`

定位基准是viewport（有诈）

所在的父元素如果有transform:scale(0.9);之类的属性，那就不一定了

`position:fixed`使用场景

广告
回到顶部

`position:fixed`配合`z-index`

同之前

`position:fixed`经验

视口不包括滚动条（iframe里的也是不包括）
手机上尽量不要用这个属性，坑多
搜索「移动端fixed」

`position:sticky`

`position:sticky`使用场景

`position:sticky`配合`z-index`

`position:sticky`经验

position:sticky

推走标题

`z-index`怎么用

只要是给元素定了位（非static），变成定位元素（position:relative | absolute | fixed），自然超越了当前父元素的内容文字之上
默认z-index:0;
所有定位元素以所处父元素的内容文字所在的层作为基准，默认第一层z-index:0;，越往上数值越大
z-index为负的话，处于父元素的background之后
定位元素底是当前的层叠上下文，即默认的<html></html>

demo_position_divTest

层叠上下文

也叫堆叠上下文

z-index:10和z-index:5哪个高？

不一定，要看所处的父元素是否有（形成）自己的层叠上下文

demo_stackingContext

定位与层叠上下文

比喻

每个层叠上下文就是一个新的小世界（作用域）
这个作用域里的z-index和外界无关
处在同一个作用域的z-index之间才能比较
默认层叠上下文是根元素<html></html>
相当于z-index的作用域

demo

哪些不正交的属性可以创建它

MDN文档
需要记住的：z-index/flex/opacity/transform
只要满足一个条件，就自动创建一个层叠上下文
其他随时搜索查看即可

opacity:0.5;和background:rgba(0,0,0,0.5)的区别

opacity影响整个元素

负`z-index`与层叠上下文

也只在其属于的作用域里可比较

负z-index逃不出所属层叠上下文

优先级样式继承、选择器权重

·未完待续·

参考文章

作者： Joel
文章链接：
版权声明
非自由转载-非商用-非衍生-保持署名

布局和定位的区别

一个 div 的分层

从屏幕侧面看一个div，是什么样子

position的五个取值

经验

position:relative

position:relative使用场景

position:relative配合z-index

position:relative经验

position:absolute

position:absolute使用场景

position:absolute配合z-index

position:absolute经验

position:fixed

position:fixed使用场景

position:fixed配合z-index

position:fixed经验

position:sticky

position:sticky使用场景

position:sticky配合z-index

position:sticky经验

z-index怎么用

层叠上下文

定位与层叠上下文

比喻

哪些不正交的属性可以创建它

负z-index与层叠上下文

优先级 样式继承、选择器权重

参考文章

相关文章

布局和定位的区别

一个 div 的分层

从屏幕侧面看一个div，是什么样子

position的五个取值

经验

position:relative

position:relative使用场景

position:relative配合z-index

position:relative经验

position:absolute

position:absolute使用场景

position:absolute配合z-index

position:absolute经验

position:fixed

position:fixed使用场景

position:fixed配合z-index

position:fixed经验

position:sticky

position:sticky使用场景

position:sticky配合z-index

position:sticky经验

z-index怎么用

层叠上下文

定位与层叠上下文

比喻

哪些不正交的属性可以创建它

负z-index与层叠上下文

优先级 样式继承、选择器权重

参考文章

相关文章

热门主题

`position`的五个取值

`position:relative`

`position:relative`使用场景

`position:relative`配合`z-index`

`position:relative`经验

`position:absolute`

`position:absolute`使用场景

`position:absolute`配合`z-index`

`position:absolute`经验

`position:fixed`

`position:fixed`使用场景

`position:fixed`配合`z-index`

`position:fixed`经验

`position:sticky`

`position:sticky`使用场景

`position:sticky`配合`z-index`

`position:sticky`经验

`z-index`怎么用

负`z-index`与层叠上下文

优先级样式继承、选择器权重

`position`的五个取值

`position:relative`

`position:relative`使用场景

`position:relative`配合`z-index`

`position:relative`经验

`position:absolute`

`position:absolute`使用场景

`position:absolute`配合`z-index`

`position:absolute`经验

`position:fixed`

`position:fixed`使用场景

`position:fixed`配合`z-index`

`position:fixed`经验

`position:sticky`

`position:sticky`使用场景

`position:sticky`配合`z-index`

`position:sticky`经验

`z-index`怎么用

负`z-index`与层叠上下文

优先级样式继承、选择器权重