HTML基础-04

定位

---

定位：通过定位可以将元素摆放在页面中任意位置

语法：position属性设置元素的定位

可选值：static：默认值，开启定位

　　　　relative开启相对定位

　　　　absolute开启绝对定位

　　　　fixed开启固定定位

相对定位：当元素设置position:relative;开启元素的相对定位

1           开启相对定位，元素不会发生任何变化

2           开启相对定位后，元素不会脱离文档流

3           相对定位的元素，是相对于其在文档流中的位置进行定位的

4           相对定位会使元素提升一个层级（可以遮盖其他块）

5           相对定位不会改变元素的性质，块还是块，行内还是行内

当元素开启定位后，可以通过四个方向的偏移量（offset）来控制元素的位置：

　　top:元素与其定位位置的顶部距离

　　bottom：元素与其定位位置的底部距离

　　left:元素与其定位位置的左侧距离

　　right:元素与其定位位置的右侧距离

绝对定位：（难点：参照物？？）当元素设置position:absolute;开启元素的绝对定位

1           绝对定位会完全脱离文档流

2           绝对定位会改变元素的性质，行内变块，块宽高被内容撑开

3           开启绝对定位后若不设置偏移量，元素的位置不发生变化，位置还在那里

4           绝对定位会相对于离它最近的开启了定位的祖先元素进行定位

5           绝对定位会使元素提升一个层级（层级优先级：文档流<浮动<定位）

<div class=’box1’>

　　<div class=’box2’>

　　<div class=’box3’></div></div>

</div>

定位时的参照物：

　　若box2设置absolute，box3与box2原点对齐；若box2未开，box1开，与box1对齐；否则与body对齐

若所有祖先元素都未开启绝对定位，则相对于HTML标签进行定位

一般情况，我们为一个元素开启绝对定位，会同时为它的父辈元素开启相对定位

绝对定位元素会相对于它的包含块进行定位

 

包含块：

　　对于绝对定位元素来说，包含块就是离它最近的开启定位的块元素

　　若没有开启定位的祖先元素，则其包含块是网页中的初始包含块（html为初始包含块）

开启绝对定位后，布局的公式新加入四个属性：

水平方向：

left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的宽度

绝对定位元素水平方向布局的等式：auto+auto+0+0+200px+0+0+auto+auto=500px

垂直方向：

top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块的高度

　　此时有五个值可设置为auto：left/right/margin-left/margin-right/width

在包含块中居中：

left:0;

right:0;

margin:0 auto;

全部居中（上下左右）

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

Margin:auto;

固定定位：当元素设置position:fixed;开启元素的绝对定位

　　特点与绝对定位一样，不同点：相对于浏览器的窗口（视口）进行定位

粘滞定位：电话部：王，李---粘滞其姓

.l1{

position:sticky;     将l1标签的内容黏贴

top:0;

background-color:#bfa;

}

.l1{              将l2标签的内容黏贴

position:sticky;

top:20px;

background-color:#bfa;

}

层级：开启定位元素会提升一个层级，定位元素层级可以同z-index来设置，z-index需要一个整数作为参数，值越大层级越高

父元素的层级再高，也不会盖住子元素；

若z-index的值相等，则后面元素会盖住前边元素；使用z-index时，需要开启 定位；

position:relative;

z-index:n;

设置不透明颜色度：方法一：opacity:0-1；（不，完全透）------0.5：半透明   元素整个透明（文字）

　　　　　　　　    方法二：rgba(0,0,0,0.5)    　　　　　　　　　　　　　只是颜色透明