定位——position(该样式需写在要定位的元素里,才能生效)
相对定位:relative
- 不脱离文档流
- 不设置偏移量时元素没有变化
- 原点是元素本身所在的位置(本人理解为左上角的那个点)
- 元素的层级会被提高(高层级会遮盖住低层级的)
- 元素偏移后原来他在的位置,还是会被占用
绝对定位:absolute
- 会脱离文档流
- 宽高会丢失
- 多个同级元素设置绝对定位时会重叠在一起
- 没有设置偏移量时自身的位置没有变化
- 原点是开启了绝对定位的第一个祖先元素,都没有就找根元素,实在找不到就把top和left设为0(原点本人理解为祖先元素左上角的那个点)
- 父元素会出现高度塌陷问题(使用BFC不能解决,唯一解决方法就是重新给父元素增加高宽)
偏移量(必须开启定位后才可以设置便宜):
top:元素距离原点上方的距离,前面加一个负号则为相反方向
**right:元素距离原点右方的距离,前面加一个负号则为相反方向
**
**bottom:元素距离原点下方的距离,前面加一个负号则为相反方向
**
**left:元素距离原点左方的距离,前面加一个负号则为相反方向
**
单位:px,%(基于父元素,设置了具体值的设置%才有效果,块父元素宽度默认100%)
布局
块元素并排排列:
- 使用浮动(但是要解决父元素高度塌陷问题)
- 把元素变成行内块(但是会出现间隙问题)
显示和隐藏的元素
-
先隐藏掉元素(使用隐藏元素样式)
-
在显示出元素(给他的兄弟【建议】或父给予一个伪类选择器,鼠标移入效果,移入时隐藏显示)