CSS元素定位
王红元coderwhy
目录
1标准流布局
content
2相对定位
3固定定位
4绝对定位
5粘性定位
6z-index
coderwhy标准流（NormalFlow）
?默认情况下，元素都是按照normalflow（标准流、常规流、正常流、文档流【documentflow】）进行排布
?从左到右、从上到下按顺序摆放好
body
?默认情况下，互相之间不存在层叠现象spanspan1/span
imgsrc=images/cube.jpgalt=
inlineinlineinline-blockspanstyle=display:inline-blockspan2/span
blockdivdiv/div
pp/p
block
spanstyle=display:inline-blockspan/span
inline-blockinline
strongstrong/strong
block
h1h1/h1
inlineinline-blockinlinespanspan3/span
spanstyle=display:inline-blockspan4/span
spanspan5/span
/body
coderwhymargin-padding位置调整
?在标准流中，可以使用margin、padding对元素进行定位
?其中margin还可以设置负数
?比较明显的缺点是
?设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
?不便于实现元素层叠的效果
?如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?
?我们可以通过position属性来进行设置;
coderwhy认识元素的定位
?定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为:
?例如放在另一个元素的上面;
?或者始终保持在浏览器视窗内的同一位置;
?定位在开发中非常常见:
coderwhy认识position属性
?利