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)                 只是颜色透明

HTML基础-04

上一篇:使用Python定时发送邮件


下一篇:Android 组件化/模块化之路——在展示层搭建MVP结构