css定位有哪几种方式

2024-07-10 08:25| 来源: 网络整理| 查看: 265

css的定位是用来解决文章的叠加排列的，例如视频网站中电视剧封面图片的独播、集数等，都是使用定位的方式进行排版。如下图在这里插入图片描述 css的定位方式分为static、relative、absolute、fixed、sticky。

1.static（默认值）：没有定位。

2.relative（相对定位）特点：（1）如果没有定位偏移量，对元素本身并没有任何影响。（2）不使元素脱离文档流，其空间会被保留。（3）不影响其他元素的布局。（4）定位其偏移量（left，top，right，bottom）是相对于元素本身进行偏移的。例：当给当前元素设置position：relative ；left:20px时，其位置会相对于当前元素的位置向左偏移20px。 3.absolute（绝对定位）特点：（1）会使元素完全脱离文档流。（2）是内联元素支持宽高；使块元素默认宽根据内容决定。（3）生成绝对定位的元素，相对于定位（除了static的其他定位）的祖先元素进行偏移，若没有定位祖先元素，则相对于整个页面进行偏移。如果定义了多个祖先元素，生成绝对定位的元素相对于离其最近的祖先元素（父元素）进行偏移。例：

html代码：

css代码：

#box{background: red;border: 1px solid black;width: 200px;height: 200px;; } #box .box1{width: 100px;height: 100px;background: yellow；}

运行出来的结果如下图在这里插入图片描述当给#box和.box1分别添加相对定位和绝对定位后：

#box{background: red;border: 1px solid black;width: 200px;height: 200px;; position: relative;} #box .box1{width: 100px;height: 100px;background: yellow;position: absolute;top: 100px;left: 100px;}

运行结果如下：在这里插入图片描述可以看到box1相对于其父元素进行了偏移。

4. fixed（固定定位）：特点：（1）使元素完全脱离文档里。（2）使内联元素支持宽高；使块元素默认宽根据内容决定。（3）相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响。（4）不会受其祖先元素的影响。例： html代码

css代码

body{height: 3000px;} #box{border: 1px solid black;width: 200px;height: 200px; } #box .box1{width: 100px;height: 100px;background: yellow;}

运行结果如下：在这里插入图片描述此时滑动滚动条时，整个box会跟随滚动条的滑动进行移动：当给box1加个固定定位之后： css代码如下：

body{height: 3000px;} #box{border: 1px solid black;width: 200px;height: 200px; } #box .box1{width: 100px;height: 100px;background: yellow;position: fixed;}

运行结果：在这里插入图片描述可以看到，在给box1加了固定定位之后，box会随着滚动条的滑动而移动，box1却不会，会一直固定不动。

5. sticky（黏性定位）特点：sticky相当于是static和fixed的结合体。给position：sticky；定义一个位置，在没滑到那个位置之前，和没有定位没有区别，但是当滑动到定义的位置之后，就产生了固定定位的特性。例： HTML代码：

hello

css代码：

body{height: 3000px;} #box p{margin-bottom: 100px;} #box p.show{position: sticky;top: 100px;background: red;}

运行结果：在这里插入图片描述没有滑动到.show距离top100px的时候，跟没有设置定位没区别，都随着滚动条的滑动而移动。当.show到达距离top100px的位置时：《逆战班》

【本文地址】

css定位有哪几种方式

css定位有哪几种方式

今日新闻

推荐新闻