CSS踩坑记
分类:
文章
•
2023-04-04 13:56:06
一、position
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
- 如果想将某控件固定在窗口某个位置，比如顶部，就可以采用该fixed属性。但需要注意其兄弟组件，如果想显示完整，需要进行移动，以免被该组件遮蔽。而且通常需要给他们的父组件position设置为relative,overflow为hidden，避免子组件显示异常。
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。同时该对象从文档流中拖出。
- 子元素采用absolute定位时，若父元素没有设定高度，而且父元素设置了overflow:hidden,会导致子元素不显示，原因是在使用absolute定位时，会导致该元素脱离文档流，无法撑开父元素。解决方法可以指定父元素足够高的高度，可以通过js进行；子元素去掉absolute属性。
- 子元素定位的依据是设定position属性的父元素，上一层没有设定继续往上一层查找，若一直没有则默认依据是body。
