定位

定位技术

定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置。定位技术主要用于管理和微调页面中的一个特殊项的位置

定位=定位模式+边偏移

定位类型主要有五种:

静态定位(static)

每个元素的默认属性,表示将元素放在正常布局流的默认位置,没有什么特殊的地方

相对定位(relative)

允许相对于元素在正常布局流中的位置移动它,包括将两个元素叠放在页面上,可用于微调和精准设计

绝对定位(absolute)

将元素完全从页面的正常布局流中移出,类似于将它单独放在一个图层。绝对定位在创建复杂的布局效果时非常有用。

固定定位(fixed)

与绝对定位很相似,不同的是它将一个元素相对于浏览器视口固定,而不是相对另外一个元素。这在创建类似整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用

粘性定位(sticky)

一种新的定位方式,它会让元素先保持和静态定位一样的定位,当它的相对视口位置达到某一个预设值时,它就会像固定定位一样定位

定位叠放次序 z-index

盒子重叠的时候,可以使用z-index来控制盒子的前后次序

数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上

如果属性值相同,则按照书写顺序,后来居上,数字后面不能加单位

只有定位的盒子才有z-index属性

你可能感兴趣的:(定位)