css中的绝对定位和相对定位有什么区别?

html-css058

css中的绝对定位和相对定位有什么区别?,第1张

css中的绝对定位和相对定位的区别:

position: absolute,绝对定位。position: relative,相对定位。

position:absolute,float会隐式地改变display的类型(display:none除外)。即是当元素设置position:absolute、float:left、float:right中任意一个时,都会让元素以display:inline-block的方式显示(特点是:可以设置长宽,默认宽度不占满父元素)。

CSS:

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

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

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

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

扩展资料:

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

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

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

绝对定位就是把元素的左上角固定到浏览器窗口的某个指定的、唯一的坐标点上,比如说 left:100pxtop:50px 就是说元素的左边距离浏览器窗口的左边100像素、元素的上边距离浏览器窗口的上边50像素。

而相对定位就是相对于元素本来的位置再进行平移后获得新的位置,也就是说这个新位置是要根据原来的位置来定的,比如 left:10pxtop:-20px 就是把元素往右移动10像素,往上移动20像素。

打个比方,在地球上我们用经纬度来确定一个点的位置就是绝对定位,而类似“东南方向15公里”这样的就是相对定位了。