《CSS学习笔记》之定位：相对、绝对、固定、z-index

目录

一、应用场景示例

二、相对定位 relative

三、绝对定位 absolute

四、固定定位 fixed

五、z-index 层级概念

六、安利一个好网站

---

核心：让元素到达我们想要指定的位置去

一、应用场景示例

二、相对定位 relative

特点：

• 相对于自身进行偏移
• 原来的位置依然存在，不影响其他元素的排列布局

三、绝对定位 absolute

position：absolute；

特点：

• 原来的位置不在了（脱离了文档流），影响其他元素的排列布局
• 如果该元素的父级或者祖先元素存在relative/absolute/fixed 其中任何一种，则相对于最近的元素定位。如果父级或者祖先元素没有定位，则相对于浏览器进行定位。

 重点：

• 要在父级元素设置定位，子元素才能根据父级元素来定位，并且不能超出父级元素边界。
• 若不给父级元素设置定位，子元素相对于浏览器定位。
• 若是给子元素的爷爷元素设置定位，子元素相当于爷爷定位。

子绝父相思想：如果一个元素要使用定位，一般将该元素设置为绝对定位，将他的父级或者祖先设置为相对定位。

四、固定定位 fixed

应用场景：侧边栏永远都固定在一个位置

特点：

• 始终相当于浏览器进行定位
• 原来的位置不在了，不影响其他元素的排列布局

五、z-index 层级概念

 

六、安利一个好网站

HTML5资源教程 | 分享HTML5开发资源和开发教程html5tricks是目前收藏html5资源教程最完整的html5学习网站，主要为广大html5开发者提供免费的html5开发教程、html5资源、html5应用、html5开发工具、html5游戏、html5网站等资源，我们做最好的html5资源教程网站。https://www.html5tricks.com/地图 | 卡巴斯基网络威胁实时地图https://cybermap.kaspersky.com/cn