Front-end-learning-to-organize-notes
Front-end-learning-to-organize-notes copied to clipboard
Published
20 hours ago •
Chocolate1999
Chocolate1999
css绝对定位和相对定位都是以谁为基准
-
absolute 绝对定位 相对于最近的已定位的祖先元素, （有已定位指position不是static的元素祖先元素）如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。
-
relative：相对定位元素的定位是相对其正常位置。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。
共同点：改变行内元素的呈现方式，都脱离了文档流；不同点：absolute的”根元素“是可以设置的，fixed的“根元素”固定为浏览器窗口
相对定位： fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。 sticky 定位： 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。