JS基础编程课件16_CSS元素定位.pdf

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属性

◼利