给出一个在CSS中使用位置属性的详细例子
位置属性决定了元素将如何定位。它有以下五种值:
每个页面都可以被看作堆叠在页面的一层,如下图所示。
当位置设置为相对时,元素仍在正常流中,位置是正常的,并且可以移动元素,如左向右,它影响其他元素的位置。
当一个元素的位置值是绝对值或固定值时,有三件事要发生:
该元件沿z轴的方向移动,该单元与普通流分离,因此它不再占用原始层的空间,而且它也将覆盖下层的元素。
此元素将成为块级元素,这相当于为该元素设置显示块:(对于内联元素,例如,设置绝对值后,会发现它可以设置宽度高度)。
如果元素是块级元素,则元素的宽度由原来的宽度自动改为100%(占一行)。
鉴于此,当位置设置为绝对的、固定的,它是没有必要设置显示块。如果你不想覆盖下层元素,你可以设置z-index值达到的效果。
下面是插件参数用法的一个示例:
1。位置:静态
所有元素的默认位置是位置:静态,这意味着元素不位于,它出现在文档中它应该是。
一般来说,您不必指定一个位置:静态,除非您想重写您设置的设置。
CSS代码将内容复制到剪贴板。
{ # div-1
位置:静态;
}
2。相对位置:
如果你设置位置:相对,你可以使用顶部,底部,左边和右边移动元素相对于元素应该出现在文档中的位置,这意味着元素实际上仍然占据文档中原来的位置,但是它相对于文档的原始位置在视觉上移动。
CSS代码将内容复制到剪贴板。
{ # div-1
职位:相对;
上图:20px;
左:- 40px;
}
三.位置:绝对的
当位置指定为绝对值时,该元素已退出文档,也就是说,它在文档中没有位置。可按设定的上、下、左、右准确定位。
CSS代码将内容复制到剪贴板。
{ # div-1a
位置:绝对;
顶部:0;
错误:0;
宽度:200px;
}
4。位置:相对位置:绝对
如果我们设置的相对位置对div-1,在div-1所有元素将根据你的div-1a设置绝对位置的div-1.if处,你可以移动div-1a对div-1右。
CSS代码将内容复制到剪贴板。
{ # div-1
职位:相对;
}
{ # div-1a
位置:绝对;
顶部:0;
错误:0;
宽度:200px;
}
5的绝对定位。两列
现在可以使用相对定位和绝对定位来进行两列布局。
CSS代码将内容复制到剪贴板。
{ # div-1
职位:相对;
}
{ # div-1a
位置:绝对;
顶部:0;
错误:0;
宽度:200px;
}
{ # div-1b
位置:绝对;
顶部:0;
左:0;
宽度:200px;
}
6的绝对定位。两列
一种选择是为元素设置一个固定的高度,但是这个方案对大多数设计不太合适,因为我们通常不知道有多少文本或如何使用确切的字体大小。
CSS代码将内容复制到剪贴板。
{ # div-1
职位:相对;
身高:250px;
}
{ # div-1a
位置:绝对;
顶部:0;
错误:0;
宽度:200px;
}
{ # div-1b
位置:绝对;
顶部:0;
左:0;
宽度:200px;
}