CSS | 定位

已于 2024-08-18 15:55:08 修改
阅读量327 收藏 4
点赞数 3
分类专栏： CSS 文章标签： css 前端
于 2024-08-16 12:41:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55483876/article/details/141229966
版权

下一篇持续更新中… 如有错误欢迎指正！！！

文章目录

前言

学习目标

在这里插入图片描述

学习内容

在这里插入图片描述

1. 定位

1.1 为什么需要定位？

在这里插入图片描述

1.2 定位组成

在这里插入图片描述
在这里插入图片描述

1.3 静态定位 static（了解）

在这里插入图片描述

1.4 相对定位 relative（重要）

在这里插入图片描述

1.5 绝对定位 absolute （重要）

在这里插入图片描述

子绝父相

在这里插入图片描述

1.6 固定定位 fixed（重要）

在这里插入图片描述

小tips：固定在版心右侧位置

在这里插入图片描述

- 相对定位不脱标，可以直接用margin auto；绝对定位和固定定位不行，他们俩实现水平居中，是通过算法。

1.7 粘性定位 sticky （了解）

（可以通过Java Script实现）
在这里插入图片描述

定位的总结

在这里插入图片描述

1.8 定位的叠放次序 z- index

在这里插入图片描述

定位的拓展

  1. 绝对定位的盒子居中
    在这里插入图片描述
  2. 定位的特殊性
    在这里插入图片描述
  3. 脱标的盒子不会触发外边距塌陷
    浮动元素、绝对定位（固定单位）元素的都不会触发外边距合并的问题
  4. 绝对定位（固定定位）会完全压住盒子
    在这里插入图片描述
    在这里插入图片描述

2. 网页布局总结

在这里插入图片描述

3. 元素的显示与隐藏

在这里插入图片描述

3.1 display 属性

在这里插入图片描述

3.2 visibility 可见的

在这里插入图片描述

3.3 overflow 溢出

在这里插入图片描述

总结

在这里插入图片描述

鹤茗_515
关注
专栏目录
CSS3定位
weixin_68485297的博客
04-08 755
一、定位 使用 position属性在文档中的实现定位。并通过属性值top、left、right和bottom来决定该元素的位置。 语法：position：static | relative | fixed | absolute | sticky；top：0px；left：0px； 1、static 静态定位 该属性值没有定位， 以标准流方式显示（它将忽略top、bottom、left、right、z-index声明） 2、absolute 绝对定位 生成绝对定位的元素，相对自身原来的位
css左边定位,CSS Position(定位) | 菜鸟教程
weixin_39802020的博客
08-04 1378
CSS Position(定位)position 属性指定了元素的定位类型。position 属性的五个值：元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, righ...
【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平/垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
07-30 1171
一、CSS 定位 1、盒子模型位置摆放三大机制 - 普通流 / 浮动 / 定位 2、CSS 定位简介 3、边偏移 4、定位模式 5、静态定位 6、相对定位 7、绝对定位 7、绝对定位特点 8、子绝父相 - 子元素绝对定位 父元素相对定位 9、固定定位概念语法 10、绝对定位元素设置 水平 / 垂直 居中 1、设置固定尺寸 2、先偏移50%再回退固定值 11、多个盒子堆叠次序问题 12、z-index 属性值简介 13、Display 显示模式转换 14、使用绝对定位 / 浮动解决外边距塌陷问题
CSS定位详解
OYJP666的博客
07-16 1823
详细讲解CSS里面的定位，以及定位使用的一些小技巧
前端css定位
qq_39218045的博客
09-01 2063
绝对定位是相对于整个浏览器窗口进行定位，它是脱离文档流的，不受周围环境影响。相对定位是相对于之前盒子出生点去进行位置描述，该定位会受到周围环境影响。：在主轴上均匀分布，首个项目放在起始位置，末尾项目放在末尾位。：默认值，如果项目未设置固定的侧轴尺寸，则会拉伸以填满容器。：在主轴上均匀分布，包括首个项目和末尾项目两侧的空间。定位要结合位置描述属性去进行使用才会产生效果。定位要结合位置描述属性去进行使用才会产生效果。定位要结合位置描述属性去进行使用才会产生效果。定位要结合位置描述属性去进行使用才会产生效果。
【CSS】定位 ① ( CSS 三大盒子布局方式 | CSS 定位简介 | 边偏移 | 定位模式 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-11 1430
一、CSS 三大盒子布局方式 二、CSS 定位简介 1、边偏移 2、定位模式
css中的定位详解
2401_84092456的博客
04-19 1077
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！减轻大家的负担。**[外链图片转存中…(img-Lz5jcROs-1713476063704)]
css固定定位
lxllxl211的博客
10-03 2151
主要使用场景：可以在浏览器页面滚动元素时元素的位置不会改变。1、以浏览器的可视窗口作为参考点移动元素。4、不占有固定位置，浮起来了。3、不随滚动条的滚动而变化。2、和父元素没有关系。
CSS定位
weixin_61789925的博客
10-16 4563
定位，即position，css的基本属性之一，分为相对定位relative，绝对定位absolute，固定定位fixed以及粘性定位sticky，现在来一一介绍。
CSS绝对定位
weixin_52629592的博客
06-20 8991
当元素的position设置为absolute时,则开启了元素的绝对定位用法: position: absolute;绝对定位的特点:与相对定位一样.开启了绝对定位以后,如果不设置偏移量,元素的位置不会发生任何改变开启绝对定位之后,元素会从原有的文档流中脱离.只是相对于它的包含块定位,包含块可能是文档流中的另一个元素或者是初始包含块绝对定位会改变元素的性质.行内元素变为块元素,块元素的宽度被内容撑开(即块元素中原有内容有多宽,开启绝对定位之后的块元素就有多宽)绝对定位会使元素提升一个层级下面我们来看一个栗子
css 相对定位 绝对定位 浮动 分析
09-25
相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下进行微调。当一个元素被设置为相对定位，通过`position: relative;`，我们可以使用`left`、`right`、`top`和`bottom`属性来调整元素相...
css锚点定位被顶部固定导航栏遮住的解决方案
11-21
标题中的“css锚点定位被顶部固定导航栏遮住的解决方案”主要涉及到的是网页设计中一个常见的问题，即如何在存在固定在顶部的导航栏时，正确地利用HTML的锚点（Anchor）功能进行页面内部跳转，而不让标题被导航栏...
css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)
09-24
在CSS布局设计中，绝对定位是一种强大的工具，用于精确控制元素在页面上的位置。然而，当面临不同分辨率的设备时，绝对定位可能会遇到显示问题。本文将深入探讨如何确保使用CSS绝对定位的元素在不同分辨率的电脑上...
详解CSS粘性定位 sticky
12-11
CSS粘性定位（sticky positioning）是CSS布局中的一种特性，它允许元素在用户滚动页面时在特定条件下保持可见。在CSS中，`position: sticky`是实现这一效果的关键。这个属性可以看作是`static`（无定位）和`fixed`...
详解css 定位与定位应用
12-01
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
CSS的定位（文档流，相对定位，绝对定位，固定定位）
2301_82005922的博客
11-11 702
讲述了CSS的定位中文档流，相对定位，绝对定位，固定定位的定义和如何在HTML5文档中应用
第8章 利用CSS制作导航菜单.
w_wx8866的博客
11-11 458
我们在浏览网页的时候可以看见许多位于顶部的导航栏，供我们点击跳转。
24.11.10 css
最新发布
2401_87910368的博客
11-11 256
属性用于创建浮动框，允许元素向左或向右浮动，使其脱离常规的文档流。浮动元素会移动到包含块的左端或右端，直到它的外边缘接触到包含块或另一个浮动元素的边缘。​ 行内块() 从走到右排列 宽高有效 图片 表单元素(输入框 选择框 按钮.....)div+css布局 实际上就是在页面中画格子 大格子中套小格子。​ 行内(inline) 从左到右排列 宽高无效。​ 块 (block) 从上到下排列 宽高有效。伪类选择器 (选取元素的交互状态)1,2 后加载的覆盖先加载的。选择器组合方式 (了解即可)
CSS如何改变滚动条的颜色样式粗细？
zhangxueyou2223的博客
11-07 296
默认滚动条很丑怎么办？如何改版滚动条的粗细，颜色，让它更美观？CSS如何改变滚动条的粗细？干货来了 🧨🧨🧨 完结，撒花~ ，记得收藏 ~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值