html入门分层次,王老师html零基础学习笔记第10课—定位+层级关系

摘要：

图片、文字、文本框、图标等等，在整个网页设计都离不开定位，只有通过定位才能让它去到你想要的地方，所以要了解整个层级关系

一.定位基本思想

CSS 定位 (Positioning) 属性可以对元素进行定位。允许你设置元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

二.CSS  position 属性(影响元素框生成的方式)

static(默认)：

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

fixed：

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

relative：

元素框改变位置。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：

相对于其包含块定位.(包含块可能是文档中的另一个元素或者是初始包含块)元素原先所占的空间会关闭，不论原来它在正常流中生成何种类型的框元素定位后生成一个块级框。

相对定位

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

例: #box{

position:relative;

left:80px;

top:100px;

}

绝对定位

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

绝对定位注意点：

Z-index

Z-index 可以调换两个层的位置关系.  值: 值可以为正，也可以为负，值越大，越在上面

正值 :   z-index:3;

负值： z-index: -1;

z-index:相对和绝对定们的元素有效果    用到最多的就是悬浮导航