css的定位

定位(position)
静态定位(static)

静态定位就是所有元素的默认定位方式, 当position属性的取值为static时
可以将元素定位于静态位置 所谓静态位置就是各个元素在HTML文档流中默认的位置

上面的话翻译成白话: 就是网页中所有元素都默认的是静态定位 其实就是标准流的特性

相对定位relative
注意 :

1. 相对定位最重要的一点是 他可以通过边偏移移动位置 但是原来的所占的位置 继续占有

2. 其次 每次移动的位置 是以自己的左上角为基点移动(相对于自己来移动位置)

绝对定位absolute
如果文档可以滚动 绝对定位元素会随着他滚动 因为元素最终会相对于正常流的某一部分定位
当position属性的取值为absolute时 可以将元素的定位模式设置为绝对定位
注意: 他可以通过边偏移移动位置 绝对定位是完全脱标的 不占有位置

子绝父相

1. 子级是绝对定位 不会占有位置 可以放到父盒子里面的任何一个地方

2. 父盒子布局时 需要占有位置 因此父亲只能是相对定位

绝对定位的盒子水平/垂直居中

1. 首先 left 50% 父盒子的一半

2. 然后走自己外边距负的一半值就可以了 margin-left: 左走自己宽度的一半;

固定定位fixed

1. 固定定位的元素跟父亲没有任何关系 只认浏览器

2. 国定固定位完全脱标 不占位置 不随着滚动条滚动

叠放层次(z-index)

1. z-index的默认属性值是0 取值最大 定位元素的层叠元素中越居上

2. 如果取值相同 则根据书写顺序 后来居上

3. 后面数字一定不能加单位

4. 只有相对定位 绝对定位 固定定位有此属性 其余标准流 浮动 静态定位都无此属性 亦不可指定此属性

dispaly 显示
display:none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外 同时还有显示元素的意思

特点: 隐藏之后 不在保留位置

visibility 可见性
visible: 对象可视

hidden: 对象隐藏

特点 : 隐藏之后 不在保留位置

overflow 溢出
visible : 不剪切内容也不添加滚动条

auto : 超出自动显示滚动条 不超出不显示滚动条

hidden : 不显示超过尺寸的内容 超出部分隐藏掉

scroll : 不管超出内容否 总是显示滚动条