和宽高自适应下
1.定位的基础属性,属性值
2.定位的特殊情况
1)绝对定位在兄弟关系中的演示效果
都添加定位(兄弟元素)====相对,绝对,固定
默认的是后面的把前面的遮盖住===产生效果===层级效果
如何调整层级顺序呢:
z-index属性
取值为纯数值,不带任何的单位,只能添加在已有定位的层级上面
取值越大 层级越靠上面
默认值z-index:auto====可以理解成0
也可以取负数
使用的时候,一定要添加在已有定位的元素中,没有定位的元素调整不了层级顺序
2)绝对定位(父子关系)===父相子绝
父元素能否使用其他的定位=====能使用
如果父元素带了margin:0 auto的话,会让margin0 auto:失效
失效的原因点:绝对定位会脱离文档流,不占页面
父元素是可以使用绝对定位和固定定位,相对定位
综合考虑:父元素推荐使用相对定位
3)宽度自适应的盒子(不设置宽度)
添加绝对(固定)定位后的盒子会脱离文档流,不占页面空间
如果你的盒子是一个自适应的盒子(没有设置宽度的盒子)
添加绝对和固定之后,仍然是自适应的(被文本撑开的)
4)添加了固定定位和绝对定位后的元素会脱离文档流不占页面空间了
5)绝对定位和固定定位可以改变元素的类型
display:block
3.定位和浮动的区别(定位:固定定位和绝对定位)
浮动:让元素横向显示,进行布局区块的划分
定位:进行元素位置的调整,能让元素横向显示,
相同点:
1)都能转换元素类型为:块级元素
2)如果两个补位元素中都没有文本的话,二者实现的效果是一样的后面的元素都会上去补位置
3)对于自适应的盒子来说,添加浮动和添加定位(绝对和固定),元素仍然是自适应的,是被文本撑开的
4)脱离文本流,margin:0 auto失效
5)都能解决margin-top作用在父元素上面的问题:
他们都触发了BFC(块级格式化上下文)以一个独立的快进行显示;不会收到外界的干扰,也不会影响到外界
不同点:
1)概念不同
浮动:如果后面补位的元素有文本,浮动容易产生环绕效果=====半脱离文档流
定位:如果后面补位的元素有文本,不会出现文本环绕,自己把文本盖住了====全脱离文档流
4.定位的使用情况问题
static relative absolute fixed sticky
静态定位:static====默认值======几乎不适应
粘性定位:sticky====滚动吸顶====就这一种情况(其他地方不使用)
固定定位:固定定位用来做:广告栏,流氓广告,楼梯层,遮罩层等效果
大部分使用的是相对定位和绝对定位
如果你就是调整元素位置为几个像素的时候====相对就可以了
如果需要调整比较大的数值:=======绝对定位===父元素一定要加上相对定位
遮罩效果:一定要用固定定位
5.盒子位于水平垂直中间显示(面试题)
如果制作浏览器中的水平垂直居中显示
html,body{height:100%}
.box{
width:100%;
height:100%;
background-color:rgba(0,0,0,.5);
添加定位
position:fixed;
top:0px
}
.box>div{
width:500px;
height:300px;
background-color:red;
position:abslute/fixed;
top50%;
left:50%;