CSS定位

相对定位:

position:relative;

如果对一个元素进行相对定位,它将出现在它所在的位置(在文档流中的初始位置)上,然后可以通过设置垂直和水平位置,让这个元素“相对于”它的起点移动。

注意:1.在使用相对定位时,无论是否移动,元素仍然占据原来的空间;

     2.移动元素会导致他覆盖其他框;

     3.相对定位被看做是普通流定位的一部分,因为元素的位置是相对于他在普通流中的位置。

 

绝对定位:

position:absolute;

绝对定位的位置是相对于距离它最近的那个已定位的祖先元素确定的。

注意:

    1.因为绝对定位的框与文档流无关,所以它们可以覆盖页面的其他元素。

 

 

固定定位:

position:fixed;

固定定位是绝对定位的一种;差异在于固定定位的包含块是视口(我理解为浏览器窗口),这使我们能够创建总是在窗口固定位置的浮动元素

注意:

  1.设置固定定位后必须设置left和top属性,否则在一些浏览器中滚动滚动条时会出现固定定位元素晃动的情况;

 

浮动:

 浮动的框可以左右移动,直到它的外边缘碰到包含框或者另外一些浮动框的边缘。因为浮动框不在文档的普通流中,所以文档的普通流中的块框就像浮动流不存在一样(如果浮动元素后面有一个文档流的元素,那么这个元素会表现得浮动根本不存在一样。但是框的文本内容会受到浮动的影响,会移动以留出空间,即:浮动元素旁边的行框被缩短,从而给浮动元素留出空间,因此,行框围绕浮动框)

注意:

  1. 要想阻止行框围绕浮动框的外边,需要对包含这些行框的元素应用clear属性;

  2.因为浮动元素不占据空间,所以容器元素不包围它们;(添加一个进行清理的空元素或者浮动容器或者为容器元素添加overflow属性,可以迫使容器元素包围浮动元素,但是应该是最好的方法)

CSS定位,布布扣,bubuko.com

CSS定位

上一篇:css3整理--gradient


下一篇:Web开发中设置快捷键来增强用户体验