- Objective:
- Breadcrumb: CSS布局 - 定位
# 概念阐释
## 语义
灵活改变少数块级元素在页面中的布局。 这些属性的值可以采用逻辑上期望的任何单位 ——`px`，`mm`，`rems`，`％` 等。
## 语法
#### 固定定位:
将元素固定在某一个位置，即便滑动浏览器，元素位置不变。父元素默认情况下 position 属性都是 static
```css
p {
position:static;
}
```
#### 相对定位:
改变元素的位置，但元素在文档流中的默认位置仍然保留，其他元素不能覆盖上去；位置调整通过`top` ` bottom` `left ` `right`
“可以移动内联元素？”
```css
p {
position:relative;
top:30px;
left:30px;
}
```
#### 绝对定位:
改变元素的位置，并且不会保留文档流，其他元素会覆盖上去；位置调整通过`top` ` bottom` `left ` `right`，可以和`relative`父元素一起使用。
一般会与位置是相对定位的父级元素一起使用，当父级元素移动时，子级元素一起移动。
```
div {
position:relative;
}
p {
position:absolute;
top:30px;
left:30px;
}
```
#### Z-index
对于一个非`static`属性的盒子（可以是`relative` `absolute`）,可以通过`z-index`实现元素重叠，决定哪个元素在顶部。
```css
/* 字符值 */
z-index: auto;
z-index: 3; 数字越大越靠前
z-index: -1;/* 当另一元素为默认值时，使用负值降低优先级 */
#douban {
position: absolute;
top:150px;
right:300px;
z-index:1;
}
```
# 实例
在这个例子中，绝对定位在img选择器中完成，再通过不同的class属性修改相对应的图片。
# 相关内容
# 问题
复写这个样式
# 问题答案
```html
<body>
<div>
<img id="evernote" src="./290862.png" alt="">
<img id="notion"src="./FileNotion app logo - Wikimedia Commons.png" alt="">
<img id="douban"src="./截屏2022-01-02 下午4.00.45.png" alt="">
</div>
</body>
```
```css
img{
width:200px;/*之所以没有在img下定义position是因为我想尝试relative和absolute的不同写法*/
}
#evernote{
position: relative;
}
#notion {
position: relative;
right:60px;
z-index: 2;
}
#douban {
position: absolute;
top:150px;
right:300px;
z-index:1;
}
```
# 参考资料
- [CSS定位-MDN](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning)
- [Z-index](https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index)