开心小窝

一个记录日常学习且神奇的地方

CSS定位属性

1.position:把元素放置到一个静态的、相对的、绝对的、或固定的位置中。把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

属性
absolute 生成绝对定位的元素。将被赋予此定位方法的对象从文档流中拖出,使用left,right,top, bottom等属性相对于其最接近的一个具有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在最上面,可以有负值。
relative 依据left,right,top,bottom等属性在正常文档流中偏移自身位置
static 默认值,没有定位
inherit 规定应该从父元素继承 position 属性的值。

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

 

如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。

box_relative {  position: relative;
                  left: 30px;
                  top: 20px;}

绝对定位使元素的位置与文档流无关,因此不占据空间。

box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

2.top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

3.right:定义了定位元素右外边距边界与其包含块右边界之间的偏移。

4.bottom:定义了定位元素下外边距边界与其包含块下边界之间的偏移。

5.left:定义了定位元素左外边距边界与其包含块左边界之间的偏移。

6.overflow:设置当元素的内容溢出其区域时发生的事情。

  • auto:自动添加
  • scroll:添加滚动条
  • hidden:不添加滚动条

7.z-index:设置元素的堆叠顺序。默认的是0,值越大的在越上面显示。测试