CSS：为什么需要定位

已于 2024-08-03 19:47:52 修改
阅读量25 收藏
点赞数
文章标签： css 前端
于 2024-08-03 19:46:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/140895606
版权

为什么需要使用定位？因为有很多效果只用标准流和浮动是做不了的，只能靠定位来实现。

  • 浮动可以让多个块级盒子在一行内没有缝隙地排列显示，经常用于横向排列盒子。
  • 而定位则是可以让盒子可以自由地在某个盒子内移动位置，或者固定在屏幕中的某个位置，并且可以压住其它盒子。

例如，淘宝网的右侧是固定在屏幕上的，不随着内容的滚动而滚动：
在这里插入图片描述

听海边涛声
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css：四种定位（position)以及z-index层级
YangLu888
10-08 1808
css的四种定位以及z-index层级调整
CSS 中的 : 和 :: 有什么区别？
weixin_44161385的博客
09-20 2266
css中，：（伪类）和::（伪元素）的区别
css定位属性position:fixed
wangooo的博客
01-02 3089
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
CSS：深入理解粘性定位 position: sticky
weixin_43932309的博客
05-02 1万+
粘性定位尝鲜，祖先元素的overflow和height对结果的影响。
CSS学习21：fixed（固定定位）
热门推荐
玉安_ZhangDe的博客
04-09 3万+
固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。 语法： 选择器 { position: fixed; } 固定定位的特点：（务必记住）： 1.以浏览器的可视窗口为参照点移动元素。 跟父元素没有任何关系 不随滚动条滚动。 2.固定定位不在占有原先的位置。 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型） 完全脱标—..
CSS学习20：absolute（绝对定位）
玉安_ZhangDe的博客
04-09 6681
绝对定位的介绍： 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。 语法： 选择器 { position: absolute; } 1、完全脱标 —— 完全不占位置； 2、父元素没有定位，则以浏览器为准定位（Document 文档）。 3、父元素要有定位 i.元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 ii.绝对定位的特点总结：（务必记住）...
CSS属性：定位属性（图文详解）
qq_56539172的博客
12-11 2096
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 目录 相对定位 相对定位不脱标 相对定位的用途 相对定位的定位值 绝对定位 绝对定位脱标 绝对定位的参考点（重要） 以盒子为参考点 让绝对定位中的盒子居中 固定定位 5、z-index属性： 下面逐一介绍。 相对定位 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。 我们之前学习的背景属性中，是通过如下格式： background-position:向右偏移量 向下偏移量; 但
CSS——CSS定位※ ( position )
流楚丶格念的博客
07-03 4467
文章目录定位(position)为什么要用定位？元素的定位属性静态定位(static)相对定位relative(自恋型)绝对定位absolute (拼爹型)1.父级没有定位2.父级有定位3.子绝父相 ※※绝对定位的盒子水平/垂直居中代码示例固定定位fixed(认死理型)叠放次序（z-index）四种定位总结定位模式转换顺丰案例 定位(position) background-position 背景定位 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。 PS: 定
CSS定位
Ma_jiao的博客
07-14 1万+
定位 是布局中的重要属性，一般用于盖压效果与位置相关效果。 position 给元素设置整体定位，必须同时存在position属性和偏移量属性。 属性值 说明 relative 相对定位 absolute 绝对定位 fixed 固定定位 偏移量属性 定位的元素，在水平或垂直方向需要偏移的距离。 水平：left、right 垂直：top、bottom relstive(相对定位) 参考这个元素原始应该加载的位置。 相对定位没有脱离原始状态（标准流，浮动），它不会让出原来占有的位
CSS相对定位和绝对定位
m0_46527751的博客
04-06 1万+
CSS相对定位和绝对定位相对定位绝对定位没有父盒子有父盒子时 文章参考进行了一定修改添加 相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。 相对定位和绝对定位是通过position属性来控制的，position属性的值为下面几种： 值 描述 absolute 使元素绝对定位，相对于static定位以外的最近的一个祖先元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative 使元素相对定位，相对于自己的
CSS网页布局教程:绝对定位和相对定位
12-07
相对定位（Relative Positioning）是CSS中的一种定位模式，通过设置`position`属性为`relative`实现。相对定位元素不会脱离正常的文档流，它会保持原有的位置，但可以通过`left`、`right`、`top`和`bottom`属性进行...
CSS教程:容器定位
12-09
很神奇的一个晚上，居然在以前老同事的群里跟同事讨论起CSS的东西来了，不过很意外的还是有收获。在IE中常常会碰到如果将容器定位后，出现容器内的文字不可选择（测试的时候主要用带连接的文字）。 xhtml结构： ...
CSS教程:CSS中的定位（position）
12-08
理解CSS定位还需要注意以下几点： - 浏览器兼容性：不同的浏览器对某些定位属性的支持可能存在差异，尤其是`fixed`定位在旧版本的IE中可能表现不佳。 - `z-index`：用于决定多个定位元素的堆叠顺序，数值越大，元素...
CSS教程:position 绝对定位的问题
01-19
看了下css手册，也没发现有什么不对。到网上查了下，发现了这么一句话：absolute 脱离文档流，通过 top,bottom,left,right 定位，选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body...
理解CSS浮动float、定位position
09-27
- `position:absolute`将元素从标准流中移除，根据最近的已定位祖先元素（`position`不为`static`）进行定位。如果没有这样的祖先，则相对于最近的初始包含块（通常是浏览器窗口）定位。 3. 固定定位(fixed)： - ...
CSS 的工作原理
07-25 1328
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1419
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 328
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 897
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
css:设置背景图片定位
07-28
背景图片的定位可以通过CSS的background-position属性来实现。这个属性用来决定背景图片的位置。默认情况下，背景图片的定位是以元素的左上角为坐标原点进行定位。\[1\] 如果你想将背景图片定位到右下角5px的位置，可以使用以下代码： ```css .keith { background-position: right bottom; } ``` 这样就会将背景图片定位到元素的右下角。\[2\] 另外，你也可以使用background-position属性的详细语法来设置背景图片的定位。例如，如果你想将背景图片定位到右下角5px的位置，可以使用以下代码： ```css .keith { background-position: right 5px bottom 5px; } ``` 这样就会将背景图片定位到元素的右下角，并且距离右边和底部都有5px的间距。\[3\] #### 引用[.reference_title] - *1* *2* *3* [CSS常用背景图片定位方法](https://blog.csdn.net/weixin_30535565/article/details/97602887)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值