定位详细版、浮动、省略号，溢出隐藏，设置可见，层叠顺序问题

最新推荐文章于 2024-11-01 13:37:40 发布

小汐

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量149

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_58447501/article/details/129852699

版权

本文详细介绍了CSS中的定位属性，包括relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和static（静态定位），以及浮动float和如何处理文本溢出，如使用overflow和text-overflow实现隐藏及省略号效果。同时提到了z-index在层叠顺序中的作用。

摘要由CSDN通过智能技术生成

1、position:relative; 相对定位（子绝父相）

position:relative;是相对定位

给标签添加相对定位标签会根据当前位置改变不会脱离文本流

父相子绝：父元素用相对定位，子元素用绝对定位
注意：要与top、bottom、left、right联合使用

/* 父盒子，大盒子 */
 .maxbox{
	width: 800px;
	height: 500px;
	border: 1px solid red;
	/* 相对定位 */
	/* position:relative; */
	top: 200px;
	left: 200px;
 }

2、position:absolute; 绝对定位（子绝父相）

position:absolute;是相对于浏览器进行定位（或脱离文本流）

给标签加绝对定位盒子会脱离文本流，会根据浏览器进行改变

父相子绝：父元素用相对定位，子元素用绝对定位

注意：要与top、bottom、left、right联合使用

 /* 子盒子,小盒子 */
 .smalbox{
	width: 800px;
	height: 500px;
	border: 1px solid red;
	/* 相对定位 */
	/* position:absolute; */
	top: 200px;
	left: 200px;
 }

3、position:static; 静态定位

position:static;默认

4、 position:fixed; 固定定位

position:fixed;固定定位

给标签加固定定位，标签会会脱离文本流标签是根据浏览器窗口进行定位，往下滑标签不会跟着页面滚动（也就是吧标签定死位置了）
注意：要与top、bottom、left、right联合使用

 /* 要把位置定死的标签 */
 .div{
	width: 100px;
	height: 100px;
	border: 1px solid;
    /* 固定定位 */
	position: fixed;
	top: 300px;
	height: 300px;
 }

5、float 浮动（浮动会脱离文档流）

（1）float: left; 左浮动

（2）float: right; 右浮动

6、省略号，溢出隐藏，设置可见，层叠顺序问题

（1）省略号

      white-space:nowrap;强制一行
      overflow:hidden;溢出隐藏
      text-overflow:ellipsis;省略号

（2）overflow溢出隐藏

      overflow: hidden;溢出隐藏
  overflow: visible;溢出可见（默认）
  overflow: auto;自动：如果有溢出的内容，盒子会显示滚动条
  overflow: scroll;内容被修剪，超出的内容可以通过滚动条查看
  overflow-x: auto;内容超过指定宽度的时候显示滚动条（要加上强制一行才会有效果white-space: nowrap;）
  overflow-y: auto;内容超过指定高度的时候显示滚动条

（3）visibility设置可见

visibility: hidden;隐藏内容，但是占用空间
display: none;隐藏内容，但是不占用空间

（4）层叠顺序

z-index: 数值(不要加单位);
数值为整数（负整数、0、正整数）
数值越大，层叠级别越高