## 定位属性 包括定位模式(定位的分类)和边偏移两部分. ## 定位模式 | 值 | 描述 | |---|---| | static | 自动定位 | | relative | 相对定位,相对于其原文档流的位置进行定位 | | absolute | 绝对定位,相对于上一个已经定位的父元素进行定位 | | fixed | 固定定位,相对于浏览器窗口进行定位 | ## 静态定位 静态定位是所有元素的默认定位方式,当position属性的取值为static时,可以将元素定位于静态位置.所谓静态位置就是哥哥元素在HTML文档流中默认的位置.在静态定位状态下,无法通过边偏移属性来改变元素的位置. 一个原来有定位的元素通过设置此属性,可以去掉定位效果. ## 相对定位(自恋型,不脱标) 相对定位是将元素相对于它在标准流中的位置进行定位,当position属性的取值为relative时,可以将元素定位于相对位置.对元素设置相对定位后,可以通过边偏移属性改编元素的位置,但是它在文档流中的位置仍然保留. 注意: 1. 相对定位最重要的一定是,它可以通过边偏移移动位置,但是原来所占的位置,继续占有,后面的盒子仍以标准流方式对待它. 2. 其次,每次移动的位置,是以自己的左上角为基点移动. ## 绝对定位(拼爹型) 当position取值为absolute时,可以将元素的定位模式设置为绝对定位.绝对定位最重要的一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置. 注意: 父级没定位 如果父级元素没有定位,定位以浏览器左上角为基准点对齐(document文档) 注意:父级有定位 绝对定位根据最近的已经定位(绝对,固定或相对定位)的父亲(祖先)元素为基准点进行定位. ## 子绝父相 这句话的意思是子级是绝对定位的话,父级要用相对定位. ## 绝对定位水平居中,垂直居中 50%-自身宽度一半 ``` .father { width: 400px; height: 400px; background-color: pink; position: relative; } .son { width: 100px; height: 100px; background-color: black; position: absolute; left: 50%; margin-left: -50px; //减去自身宽度一半 top: 50%; margin-top:-50px ; } ``` ## 固定定位 固定定位只认浏览器,固定定位完全能脱标,不占位置,不随着滚动条滚动. 固定定位必须要加宽度和高度,除非有内容撑开. ## 叠加次序(z-index) 使用绝对定位,会产生叠加的问题. 最后的元素会叠加前面的元素. 只需要在绝对定位的元素中添加属性z-index,可以是正数,负数,不需要单位. 数值最大的在最上面. 默认值是0. 只有绝对定位,固定定位有此属性.标准流和浮动没有这个属性. ## 定位模式转换 跟浮动一样,元素添加了绝对定位和固定定位后,元素模式也会发生转换,都转换为行内块模式.印尼次比如行内元素如果添加了绝对顶你个为或者固定定位后,可以不用转换模式,直接给高度和宽度就可以了