css基础之定位、元素的显示与隐藏

定位

一、定位position组成

定义=定位模式+边偏移,

1.定位模式用于指定一个元素在文档中的定位方式

通过css的positon属性设置,其值分为四个:

静态定位:static

相对定位:relative

绝对定位:absolute

固定定位:fixed

2.边偏移决定了该元素的最终位置

top:距离父元素上边线的距离

bottom:距离父元素下边线的距离

left:距离父元素左边线的距离

right:距离父元素右边线的距离

二、相对定位

1.它是相对于自己原来的位置移动

2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待

一般给绝对定位当爹

三、绝对定位

1.以自己的祖先元素对齐,当没有祖先元素或祖先元素没有定位时,以浏览器对齐

2.当祖先元素有定位时,以最近一级有定位的父级元素为准

3.不再占有原先的定位

子绝父相:

1.子级绝对定位,不会占有位置,可放到父级任意位置,并且不影响其他兄弟盒子

2.父级需要加相对定位限制子级在父盒子内显示

四、固定定位

1.以浏览器的可视窗口作为参照移动定位,跟父元素没有关系,不随滚动条滚动

2.不再占有原先的定位,与绝对定位类似

小技巧:固定在版心右侧

先让固定定位的盒子left:50%,再margin-left: 版心宽度的一半

五、粘性定位sticky

1.以浏览器的可视窗口作为参照移动定位

2.占有原先位置

3.必须添加top,bottom,left.right其中一个才有效

六、定位叠放次序z-index

1.数值可以是正负或0,默认auto,数值越大,盒子越靠上

2.如果属性值相同,后来者居上

3.数字上面上面不能用单位

4.只有定位的盒子才有次序

七、拓展

1.绝对定位的盒子不能用margin: 0 auto水平居中

解决方法:left: 50%,margin-left: 向左(负号)移动盒子自身宽度一半

垂直居中原理相同

2.定位的特殊特性

行内元素加了绝对或固定定位后,可以直接设置高宽,块级元素添加绝对或固定定位,如果不给宽度或高度,默认大小是内容的大小

3.浮动,绝对固定定位不会触发塌陷问题

4.浮动不会压住盒子,定位会压住

元素的显示与隐藏

一、display

1.display: none;隐藏元素,隐藏后不再占有原来位置(常用)

2.display: block;显示元素

二、visibility

1.visibility: visible;元素可视,继续占有原来位置

2.visibility: hidden;元素隐藏

三、overflow

1.overflow: hidden;将溢出的部分隐藏

2.overflow: visible;溢出的部分显示

3.overflow: auto;只有溢出的部分显示滚动条

4.overflow: scroll;溢出不溢出都显示滚动条

相关推荐
10年前端老司机1 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo7 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼9 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js