让前端飞网页前端后台技巧(CSS+HTML)

CSS定位和滚动条

2019-12-27  本文已影响0人  大前端世界

一.绝对定位

position: absolute;

/*绝对定位:
1、定位属性值:absolute
2、在页面中不再占位(浮起来了),就无法继承父级的宽度(必须自己自定义宽度)
3、一旦定位后,定位的布局方位 top、bottom、left、right都能参与布局
4、绝对定位的参考系是最近的定位父级(不是父级中的哪一点,而是四边参照四边)
5、左右同时存在,取左;同理上下取上
6、当父级定位了,子级参照父级定位,又可以重新获取父级宽度(也可以在计算中拿到父级高度)
*/

position:fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

二.相对定位

position: relative;

父级(最近的一个父级)相对定位的目的

1)不影响自身布局

2)辅助自己绝对定位布局

三默认定位

position: static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

四.继承定位

position:inherit

规定应该从父元素继承 position 属性的值。

专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

五.滚动条

overflow

上一篇 下一篇

猜你喜欢

热点阅读