定位模式(Positioning schemes)
- 常规流(Normal Flow)
- 浮动(FLoat)
- 绝对定位(Absolute Positioning)
position
- static 非定位 默认值
- relative 相对定位 (相对自己)
- absolute(绝对定位,相对非static 祖元素定位)
- fixed ,相对视口绝对定位
- sticky 粘性 文档流里离它最近的滚动元素,包含块
relative
- 在常规流里面布局
- 相对于自己本本应该的位置进行偏移
- 使用 top left bottom right 设置偏移长度
- 流内其它元素当他没有偏移一样布局
//html
<figure>
<img src="https://cdn.dribbble.com/users/2190949/screenshots/4404644/14giraffe02_1x.png">
<figcaption> 图片内容</figcaption>
</figure>
<p> 其它文本内容</p>
//css
figure {
width: 512px;
}
figure img {
display: block;
}
figcaption {
position: relative;
top: -28px;
background: rgba(0,0,0,.3);
color: #fff;
font-size: 14px;
line-height: 2;
padding: 0 1em;
}
absolute
- 脱离文档流
- 相对于最近的非static祖先的padding box 定位
- 不会对流动元素布局造成影响
- 可以有margin, 但不会折叠
//html
<figure>
<img src="https://cdn.dribbble.com/users/2190949/screenshots/4404644/14giraffe02_1x.png">
<figcaption> 图片内容</figcaption>
</figure>
<p> 其它文本内容</p>
//css
figure {
width: 512px;
position: relative;
}
figure img {
display: block;
max-width: 100%;
}
figcaption {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0,0,0,.3);
color: #fff;
font-size: 14px;
line-height: 2;
padding: 0 1em;
}
自动计算
- 这些值可以不指定
- top
- left
- right
- bottom
- width
- height
- 如果冲突怎么办?
//html
<p>
Coalhouse Fort is an English artillery fort built in the 1860s to guard the lower Thames from seaborne attack. It stands at Coalhouse Point in Essex on the north bank of the river, at a location near East Tilbury that was vulnerable to raiders and invaders. It was the last in a series
</p>
<div class="box">
绝对定位内容
</div>
<p>
Coalhouse Fort is an English artillery fort built in the 1860s to guard the lower Thames from seaborne attack. It stands at Coalhouse Point in Essex on the north bank of the river, at a location near East Tilbury that was vulnerable to raiders and invaders. It was the last in a series
</p>
//css
.box {
position: absolute;
background: #f00;
color: #fff;
}
position:fixed
- 相对于viewport
- 不会随着页面滚动发生位置变化
//html
<nav>
<a href="#"> 首页</a>
<a href="#"> 导航1</a>
<a href="#"> 导航2</a>
</nav>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
</main>
<a href="#" class="go-top"> 返回顶部</a>
//css
nav {
position: fixed;
line-height: 2;
background: rgba(0, 0, 0, .3);
width: 100%;
}
nav a {
padding: 0 1em;
color: rgba(255, 255, 255, .7);
}
nav a:hover {
color: #fff;
}
.go-top {
position: fixed;
right: 1em;
bottom: 1em;
color: #fff;
}
body {
margin: 0;
font-size: 14px;
}
a {
color: #fff;
text-decoration: none;
}
section {
height: 66.667vh;
color: #fff;
text-align: center;
font-size: 5em;
line-height: 66vh;
}
section:nth-child(1) {
background: #f44336;
}
section:nth-child(2) {
background: #3f51b5;
}
section:nth-child(3) {
background: #ffc107;
}
section:nth-child(4) {
background: #607d8b;
}
section:nth-child(5) {
background: #a4223f;
}
position:fixed
- 文档流里离它最近的滚动元素、包含块
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="./css/style.css">
</style>
</head>
<body>
<article>
<section>
<h3>动物</h3>
<div class="content"></div>
<div class="comment">
呀,这只喵喵萌翻了~!!
</div>
</section>
<section>
<h3>新闻</h3>
<div class="content"></div>
<div class="comment">
靠,这也行。牛 B
</div>
</section>
<section>
<h3>人物</h3>
<div class="content"></div>
<div class="comment">
呦呦呦,美人儿~
</div>
</section>
<section>
<h3>娱乐八卦</h3>
<div class="content"></div>
<div class="comment">
标题党,差评!!
<br/> 标题党,差评!!
</div>
</section>
<section>
<h3>时事</h3>
<div class="content"></div>
<div class="comment">
加油,挺住。
</div>
</section>
<section>
<h3>动物</h3>
<div class="content"></div>
<div class="comment">
又是萌猫一只,这小爪子怎么可以这么可爱!!!
<br/> 又是萌猫一只,这小爪子怎么可以这么可爱!!!
</div>
</section>
</article>
</body>
<script type="text/javascript" src="./js/script.js"></script>
</html>
//css
article {
margin: 3rem 0 50vh;
/* 50vh 足够 sticky “滚” */
font-size: 0.875em;
}
section {
margin-bottom: 2rem;
}
section h3 {
margin: 0;
background-color: lightgrey;
padding: 0.5em 1em;
z-index: 1;
/* z-index 里面最高的 */
}
section .content {
height: 200px;
text-align: center;
line-height: 200px;
color: gray;
position: relative;
/* z-index 初始要盖住 comment */
background-color: lightgoldenrodyellow;
}
section .content::after {
content: '自行脑补...';
}
.comment {
padding: 1em;
background-color: pink;
}
/**
* sticky
*/
h3 {
position: sticky;
top: 0;
}
.comment {
position: sticky;
bottom: 40vh;
/* 出来的位置 */
z-index: -1;
/* z-index 初始藏后门 */
}
z-index 堆叠层次
- 为定位元素(非static)指定其在z轴的上线等级
- 用一个整数表示,数值越大,越可以用户
- 初始值 auto, 可以是负数 0 正数
//html
<div class="box-a">Box a</div>
<div class="box-b">Box b</div>
<div class="box-c">Box c</div>
//css
[class^="box-"] {
position: absolute;
width: 200px;
line-height: 200px;
text-align: cneter;
color: #fff;
}
.box-a {
background: #f44336;
}
.box-b {
top: 100px;
left: 100px;
z-index: -1;
background: #0097a7;
}
.box-c {
top: 150px;
left: 150px;
z-index: 1;
background: #4caf50;
}
z-index 大的一定在上面吗
//html
<nav>
<ul>
<li>菜单1</li>
<li>菜单2</li>
</ul>
</nav>
<div id="dialog">
dialog content
</div>
//css
nav {
position: fixed;
top: 0;
}
nav ul {
position: absolute;
z-index: 2;
top: 0;
left: 0;
background: red;
padding: 1em;
width: 10em;
}
#dialog {
position: absolute;
z-index: 1;
top: 5em;
left: 5em;
background: blue;
}
堆叠上下文
堆叠上下文的生成
- root元素
- z-index 值部位auto 的定位元素
- 设置了某些css3 属性的元素 比如 opacity transfrom animation 等
绘制顺序
- 在每一个堆叠上线文中,从下到上
- 形成该上下文的元素的border和background
- z-index为负值的子堆叠上下文
- 常规流内的块级元素非浮动子元素
- 非定位浮动元素
- 常规流内非定位行级元素
- z-index 为0 的自元素 或堆叠上线文
- z-index 为正数的子堆叠上下文
块级元素标签
<header>, <footer>
<main>, <article>, <section>
<aside>, <nav>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<div>, <p>
<dl>, <dt>, <dd>
<ol>, <ul>, <li>
<form>, <table>
<pre>, <blockquote>, <address>
<hr>
<fieldset>, <figcaption>, <figure>
<hgroup>, <details>, <dialog>