css定位有哪几种方式

2024-07-10 09:10:43| 来源: 网络整理| 查看: 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的位置时：《逆战班》

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

css定位有哪几种方式

css定位有哪几种方式

今日新闻

点击排行

推荐新闻

图片新闻

专题文章