定位

Posted 2021-06-16 Sai佐为

能够说出为什么要用定位 能够说出定位的4种分类 能够说出4中定位各自的特点 能够说出为什么常用子绝父相布局 能够写出淘宝轮播图布局 能够说出显示隐藏的2种方式以及区别

为什么需要定位 1、某个元素可以自由在一个盒子内移动位置，并压住（显示在最上面）其他盒子 2、滚动窗口时，盒子固定在屏幕的某个位置   定位组成 定位 = 定位模式 + 边偏移 定位模式：用于指定一个元素在文档中的定位方式 边偏移: 决定了该元素的最终位置   定位模式 CSS position属性来设置 static 静态定位  relative 相对定位  absolute绝对定位  fixed固定定位 边偏移，定位盒子想移动到最终位置 有 top：80px  bottom left right 4个属性   1相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。 2相对定位移动过后 占有的位置保留 经典应用是给 绝对定位当爹的   绝对定位是元素在移动位置的时候， 是相对于它祖先元素来说的 1没有父元素或者父元素没有定位，则以浏览器为准定位 2如果父元素有定位（相对、对决、固定），则以最近一级的有定位父元素为参考点移动位置 例如：爷爷有定位 父没定位 子会以爷爷为参考点移动位置 3绝对定位不在占有原先的位置   固定定位是元素固定于浏览器可视区的位置，浏览器页面滚动时元素的位置不会改变。 1、以浏览器的可视窗口为参照点移动元素 2、跟父元素没有关系   不会随着网页滚动而滚动 3、固定定位不占有原先的位置   固定定位小技巧-固定到版心右侧 1、让固定定位的盒子left 50% 再 margin-lefts   粘性定位 sticky  选择器 position: sticky; top: 10px; 1、以浏览器的可视窗口为参照点移动元素（固定定位特点） 2、粘性定位占有原先的位置（相对定位特点） 3、必须添加top、left、right、bottom其中一个才有效   定位叠放次序只有定位的盒子才有 z-index属性 决定定位盒子的方向   绝对定位的盒子居中算法。 加了定位的盒子 margin：auto无效 需要居中 left 50%  margin-left:-100px 盒子宽度的一半 top:50%; margin-top:-100px; 盒子高度的一半   定位的拓展  定位特殊特性 1、行内元素添加 绝对 固定 定位  可以直接设置高度，宽度。 2、块级元素添加 绝对 固定 定位 ，如果不给宽度 和高度 默认大小是内容的大小 脱标的盒子不会触发外边距塌陷：浮动元素、绝对、固定定位元素都不会触发外边距合并的问题   绝对定位固定定位 会完全压住盒子