定位

定位=定位模式+边偏移

静态定位static:无定位

相对定位relative：相对于它原来的位置来移动，移动后原来的位置继续保留（不脱标）

绝对定位absolute：

• 相对于它祖先元素来说，如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位；
• 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
• 绝对定位不再占有原先的位置（脱标）

子绝父相：

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
• 父盒子需要加定位限制子盒子在父盒子内显示
• 父盒子布局是，需要占有位置，因此父亲只能是相对定位

固定定位fixed：

• 以浏览器的可视窗口为参照点移动元素
• 跟父元素没有任何关系
• 不随滚动条滚动
• 固定定位不在占有原先的位置

粘性定位sticky：相对定位和固定定位的混合

定位叠放次序z-index：z-index:1;

• 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有z-index属性

加了绝对定位的盒子不能通过margin:0 auto水平居中

• left:50%;：让盒子的左测移动到父级元素的水平中心位置
• margin-left:-100px;：让盒子向左移动自身宽度的一半

浮动的元素不会压住下面标准流的文字，绝对定位（固定定位）会压住下面标准流所有的内容

元素的显示与隐藏：让一个元素在页面中隐藏或者显示出来

• display属性用于设置一个元素应如何显示
• display:none;隐藏对象
• display:block;除了转换为块级元素之外，同时还有显示元素的意思
• display隐藏元素后，不再占有原来的位置
• visibility属性用于指定一个元素应可见还是隐藏
• visibility:visible;元素可视
• visibility:hidden;元素隐藏
• visibility隐藏元素后，继续占有原来的位置
• overflow属性对溢出的部分进行隐藏