1.什么是定位?
定位就是使得元素按照你想的去摆放。
2.样式关键字
position是 样式关键字
可选值
relative 相对定位
fixed 固定定位
absolute 绝对定位
static 默认值
3.什么是相对定位已经怎么设置相对定位?
相对定位 指的是相对于当前元素的位置而改变的定位。以盒子左上方那个脚为0,0点而改变位置。
1》.将position的 值设置为 relative
2》.通过 left top bottom right 四个值来设置偏移量。
left :100px;
top :100px;
向左偏移100px
向上便宜100px
此时相对于之前源点的坐标为 100px,100px
left right top bottom 和margin 有点像。设置left位100px 实际上是 向右偏移100px。就好像将外间距设置为100px;
3》相对定位的特点
相对定位没有使得元素脱离文档流
设置相对定位以后盒子的层次会比没有设置的高。所以设置相对定位后的盒子会盖住没有设置的。
设置相对定位以后块元素还是块元素,内连元素还是内连元素,并不会改变元素的类型。
只是开启了相对定位没有设置偏移量,对元素没有任何的变化。
4.什么是绝对定位以及怎么设置绝度定位
绝对定位指的是按照最近的祖先元素(开启了定位的祖先元素。只要不是默认值都算开启定位。),的左上角为0,0点而定位。 假如没有这样的祖先元素。那么他就按照浏览器的左上角为0 ,0点进行定位。
设置方式 1》将position的值设置为 absolute 。
2》然后根据不同的定位点 设置left right top bottom 四个便宜量即可
特点 : 当开启了绝对定位,元素就脱离了文档流。
元素脱离了文档流。那么块元素不在独占一行,如果不设置大小的话,大小被子元素撑开。内连元素也变成了块元素。
绝对定位会改变元素的类型。
5.什么是固定定位以及怎么设置固定定位
固定定位指定是 一直按照浏览器的窗口左上方进行定位的。无论鼠标怎么滚都按照你移动后浏览器窗口的左上方进行定位。 网页中的广告,很多就是采取这种形式的。无论你怎么滚鼠标他就是跟着你的屏幕走。
设置方式
1.将position 的值设置为 fixed
2.根据窗口左上方为0,0点设置偏移量。
特点: 固定定位也是绝对定位的一种。也会使得元素脱离文档流。
6.什么是层次
设置了定位以后。有些块元素会压在某些块元素的上面。如果想要改变默认的被压着,就要通过设置层级的方式来改变
层级只有当。开启了定位以后才能设置。
7.层级关键字
z-index :层数;
覆盖的规则: 子元素永远不可能被父元素覆盖
兄弟之间,层次高的覆盖层次低的
兄弟之间层次一样。是写在下面的层次覆盖上面的层次