CSS（六）|页面布局之定位

01.CSS定位

1.1为什么需要定位



1.2定位组成

敲代码时posr-- position: relative;
敲代码时posa-- position: absolute;
敲代码时posf-- position: fixed;
1.3静态定位static(了解)

1.4相对定位relative(重点)

1.5绝对定位absolute(重要)




.father没有定位,则.son最近一级的定位祖先元素为.yeye

1.6子绝父相的由来

案例:学成在线-hot new模块添加



1.7固定定位fixed(重要)

可视窗口:当浏览器放大缩小可以看见的窗口

1.8粘性定位sticky(了解)



1.9定位的总结

1.10定位叠放次序z-index



1.11定位的拓展

margin-left:-100px,盒子与父级元素距离-100px,即左移动100px
相对定位可以通过margin: 0 auto;水平居中,绝对定位和固定定位不可以

02.综合案例

案例:淘宝焦点图布局

03.网页布局总结

04.元素的显示与隐藏

4.1display属性



4.2visibility可见性




4.3overflow溢出




案例:土豆网鼠标经过显示遮罩