css的四种定位方式

一、定位方式

1、static（静态定位，默认设置）

解析：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

2、relative（相对定位，图层不可嵌套）

使用相对定位Relative进行定位时，原本该元素占据的空间位置不变，以“原本该元素”的左上位置为中心点，根据设置的left和top进行位置的偏移。设置为相对定位的元素框会偏移某个距离，元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

3、absolute（绝对定位，与位置属性配合使用）

使用绝对定位Absolute进行定位时，该元素脱离文档流，以“父级元素”的左上位置为中心点，根据设置的left和top进行位置的偏移。原本空间占据的位置将被关闭。绝对定位的元素的位置相对于“最近的已定位祖先元素”，如果元素没有已定位的祖先元素，那么它的位置相对于“最初的包含块”。

4、fixed（图层固定，不滚动）

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。生成绝对定位的元素，相对于浏览器窗口进行定位。其它特性同Absolute绝对定位

二、几个问题

1、display: none和visibility: hidden的区别？

display: none连子类元素一起隐藏，而且隐藏掉后原来的空间也不会占据。

visibility: hidden如果子类设置了visibility: visible，那子类就可以单独显示。隐藏掉后原来的空间仍然被占据。

另外！没有display:hidden、visibility:none写法。

2、DIV如果要层叠的话必须首先将Position属性设置为absolute，然后利用z-index属性控制层叠关系。

3、display:inline 和 display:inline-block和display:block有什么区别呢？
inline：使元素变成行内元素（内联），拥有行内元素的特性，即

• 与其他行内元素共享一行

• 不能修改width、height属性，大小由内容撑开

• padding属性 top、right、bottom、left设置都有效；margin属性只有left、right设置有效

block： 使元素变成块级元素，拥有块级的特性，即

• 独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度

• 可以修改width、height属性

• padding、margin四个方向的值设置均有效

inline-block： 使元素变成行内块级元素，结合了行内元素和块级元素的特性（不独占一行的块级元素），即

• 与其他行内元素共享一行

• 可以修改width、height属性

• padding、margin四个方向的值设置均有效

注意：当多个inline-block的元素写在一起时，是否换行效果不同（换行后两者中间会有间距），如img、button标签，这也是代码经过压缩后效果与开发版本不同的原因之一，解决方案是去除换行