CSS里的定位主要有几种方法?

html-css019

CSS里的定位主要有几种方法?,第1张

定位方案有四种:静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。

在这四种方案中,静态和相对定位不会影响整个文档的布局,而绝对和固定定位会与文档分开,因此页面不会为这两种类型的定位元素保留空间。 在默认状态下,所有元素都是静态放置的,即元素从上到下以及从左到右的顺序排列。

只要为元素设置了“ position”属性,就可以使用“ top”,“ right”,“ bottom”和“ left”属性精确定义其位置。

扩展资料:

相对定位中的“top”,“right”,“bottom”和“left”用于设置距元素原始位置的偏移量,但是绝对定位的四个属性不同。

在绝对定位中,“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。 换句话说,已定位元素的边距和包含块的边界将影响top的值,进而影响绝对定位元素的位置,但包含块的填充将不起作用。

在相对定位中,“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”,是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离,“left”和“right”也是如此。

1、新建一个html文件输入两个div标签,接着使用style属性,分别给div设置为绝对定位absolute和相对定位relative,让他们其中全部向左移动20px,向上移动30px的距离:

2、然后保存文件打开浏览器看看效果,位置显示还是比较明显的:

3、最后解释下这个结果,绝对位置就是对浏览器页面左边和顶部的距离,相对位置就是距离正常的标题的距离。以上就是css中绝对定位和相对定位的使用方法:

大概是四种:

position: fixed(固定)

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

position: absolute(绝对)

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框

position: relative(相对)

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

position: static(静态)

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