JinLinC个人在线文档库

定位布局

`display`

display 属性是用于控制布局的最重要的CSS属性，该属性规定是否/如何显示元素

display属性常用的值有：none（隐藏元素，且不影响布局，后面的元素布局将被代替上来），inline，block（行内元素不允许在其中包含其他块元素，会产生换行）

css

/*实现水平菜单布局，默认的li布局是垂直布局的，通过更改display属性可以实现一个水平布局*/
li {
  display: inline;
}

css

/*设置了block值后*/
span {
  display: block;
}
<span>值为 "block" 的 display 属性会导致</span><span>两元素间的换行。</span> /*就会分两行显示*/
/*如果没有设置block值，两块数据只在同一行显示*/  /*其他标签也适用*/

`position`

position 属性规定应用于元素的定位方法的类型（其值为：static、relative、fixed、absolute 或 sticky）

static：HTML 元素默认情况下的定位方式，静态定位的元素不受 top、bottom、left 和right属性的影响
relative：元素相对于其正常位置进行定位，设置相对定位的元素的 top、right、bottom 和left属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
fixed：元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置，top、right、bottom 和 left 属性用于定位此元素，一般固定元素放在界面的右下角
css
```
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
```
absolute ：元素相对于最近的定位祖先元素进行定位，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动，以祖先元素为整个定位框架，right：0；是以祖先元素为基准的
sticky：元素根据用户的滚动位置进行定位，粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）

`z-index`

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面），元素可以设置正或负的堆叠顺序，值为-1表示该元素在最底层显示

如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部

定位布局 ​

display ​

position ​

z-index ​

定位布局

`display`

`position`

`z-index`