css定位:绝对定位

css绝对定位

Last Updated on

最后更新: 2019-11-13 09:29 下午

css绝对定位:absolute应该是最吊诡的position属性值。 absolute 与 fixed 的行为很像,不一样的地方在于 absolute 元素的定位是在他所处上层容器的相对位置。如果这个套用position: absolute 的元素,其上层容器并没有可以被定位的元素的话,那么这个元素的定位就是相对于该网页所有内容(也就是元素)最左上角的绝对位置,看起来就是这张网页的绝对位置一样,所以当你的画面在卷动时,该元素还是会随着页面卷动。

这个元素被设定成绝对定位(position: absolute;),它会相对于它的父元素进行定位(相对于父元素的绝对定位)。这部分确实比较难以理解,但它是让你可以设计出一个良好 CSS 版面配置的必要知识。我们将会使用 position 来做出更实务的范例。

1、child_two
position:absolute;
top:0;
left:0;
z-index

absolute定位相对于整个窗口浮动;

Last modified: 2019年11月13日

前一篇

CSS学习系列

css定位:相对定位

CSS相对定位:容易掌握的概念,如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

...

后一篇

CSS学习系列

css定位:固定定位

CSS固定定位:了解这种定位差异以及固定位置如何工作。固定定位(position: fixed)的元素会相对于浏览器视窗来定位,这意味着即便页面卷动,它还是会固定在相同的位置。

...